SPA의 CSR, SSR

yarn run v1.22.19
$ next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error: Could not find a production build in the 'C:\Users\hyoun\Desktop\new\.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
    at NextNodeServer.getBuildId (C:\Users\hyoun\Desktop\new\node_modules\next\dist\server\next-server.js:169:23)
    at new Server (C:\Users\hyoun\Desktop\new\node_modules\next\dist\server\base-server.js:58:29)
    at new NextNodeServer (C:\Users\hyoun\Desktop\new\node_modules\next\dist\server\next-server.js:70:9)
    at NextServer.createServer (C:\Users\hyoun\Desktop\new\node_modules\next\dist\server\next.js:140:16)
    at async C:\Users\hyoun\Desktop\new\node_modules\next\dist\server\next.js:149:31
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

getBuildId() {
        const buildIdFile = (0, _path).join(this.distDir, _constants.BUILD_ID_FILE);
        try {
            return _fs.default.readFileSync(buildIdFile, "utf8").trim();
        } catch (err) {
            if (!_fs.default.existsSync(buildIdFile)) {
                throw new Error(`Could not find a production build in the '${this.distDir}' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id`);
            }
            throw err;
        }
    }

yarn run v1.22.19
$ next build
info  - Linting and checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization
 
Route (pages)                              Size     First Load JS
┌ ○ /                                      5.34 kB        83.1 kB
├   └ css/ae0e3e027412e072.css             707 B
├   /_app                                  0 B            77.7 kB
├ ○ /404                                   182 B          77.9 kB
└ λ /api/hello                             0 B            77.7 kB
+ First Load JS shared by all              78 kB
  ├ chunks/framework-ed075df0e0b45174.js   45.5 kB
  ├ chunks/main-e7a7892cb0edc024.js        31 kB
  ├ chunks/pages/_app-7a7f6d01b75c52d8.js  497 B
  ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B
  └ css/ab44ce7add5c3d11.css               247 B
 
λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
 
Done in 18.09s.

#!/usr/bin/env node
 
import arg from "next/dist/compiled/arg/index.js";
import { startServer } from "../server/lib/start-server";
import { getPort, printAndExit } from "../server/lib/utils";
import * as Log from "../build/output/log";
import isError from "../lib/is-error";
import { getProjectDir } from "../lib/get-project-dir";
import { cliCommand } from "../lib/commands";
 
const nextStart: cliCommand = (argv) => {
  // 해당 부분은 명령어를 입력 시 추가한 옵션에 대한 처리를 하는 것으로 보인다.
  const validArgs: arg.Spec = {
    // Types
    "--help": Boolean,
    "--port": Number,
    "--hostname": String,
    "--keepAliveTimeout": Number,
 
    // Aliases
    "-h": "--help",
    "-p": "--port",
    "-H": "--hostname",
  };
  let args: arg.Result<arg.Spec>;
  try {
    args = arg(validArgs, { argv });
  } catch (error) {
    if (isError(error) && error.code === "ARG_UNKNOWN_OPTION") {
      return printAndExit(error.message, 1);
    }
    throw error;
  }
  if (args["--help"]) {
    console.log(`
      Description
        Starts the application in production mode.
        The application should be compiled with \`next build\` first.
 
      Usage
        $ next start <dir> -p <port>
 
      <dir> represents the directory of the Next.js application.
      If no directory is provided, the current directory will be used.
 
      Options
        --port, -p      A port number on which to start the application
        --hostname, -H  Hostname on which to start the application (default: 0.0.0.0)
        --keepAliveTimeout  Max milliseconds to wait before closing inactive connections
        --help, -h      Displays this message
    `);
    process.exit(0);
  }
 
  // 프로덕션 서버 실행에 필요한 변수를 처리
  const dir = getProjectDir(args._[0]);
  const host = args["--hostname"] || "0.0.0.0";
  const port = getPort(args);
 
  const keepAliveTimeoutArg: number | undefined = args["--keepAliveTimeout"];
  if (
    typeof keepAliveTimeoutArg !== "undefined" &&
    (Number.isNaN(keepAliveTimeoutArg) ||
      !Number.isFinite(keepAliveTimeoutArg) ||
      keepAliveTimeoutArg < 0)
  ) {
    printAndExit(
      `Invalid --keepAliveTimeout, expected a non negative number but received "${keepAliveTimeoutArg}"`,
      1,
    );
  }
 
  const keepAliveTimeout = keepAliveTimeoutArg
    ? Math.ceil(keepAliveTimeoutArg)
    : undefined;
 
  // 프로덕션 서버 실행시키는 부분
  startServer({
    dir,
    hostname: host,
    port,
    keepAliveTimeout,
  })
    .then(async (app) => {
      const appUrl = `http://${app.hostname}:${app.port}`;
      Log.ready(`started server on ${host}:${app.port}, url: ${appUrl}`);
      await app.prepare();
    })
    .catch((err) => {
      console.error(err);
      process.exit(1);
    });
};
 
export { nextStart };

import type { NextServerOptions, NextServer, RequestHandler } from '../next'
import { warn } from '../../build/output/log'
import http from 'http'
import next from '../next'
 
interface StartServerOptions extends NextServerOptions {
  allowRetry?: boolean
  keepAliveTimeout?: number
}
 
export function startServer(opts: StartServerOptions) {
  let requestHandler: RequestHandler
 
 
	**// node의 http 메서드로 서버 만들기**
  const server = http.createServer((req, res) => {
    return requestHandler(req, res)
  })
 
  if (opts.keepAliveTimeout) {
    server.keepAliveTimeout = opts.keepAliveTimeout
  }
 
  return new Promise<NextServer>((resolve, reject) => {
    let port = opts.port
    let retryCount = 0
 
		**// 에러 발생한 경우**
    server.on('error', (err: NodeJS.ErrnoException) => {
      if (
        port &&
        opts.allowRetry &&
        err.code === 'EADDRINUSE' &&
        retryCount < 10
      ) {
        warn(`Port ${port} is in use, trying ${port + 1} instead.`)
        port += 1
        retryCount += 1
        server.listen(port, opts.hostname)
      } else {
        reject(err)
      }
    })
 
    let upgradeHandler: any
 
    if (!opts.dev) {
      server.on('upgrade', (req, socket, upgrade) => {
        upgradeHandler(req, socket, upgrade)
      })
    }
 
		**// 서버가 실행된 경우**
    server.on('listening', () => {
      const addr = server.address()
      const hostname =
        !opts.hostname || opts.hostname === '0.0.0.0'
          ? 'localhost'
          : opts.hostname
 
      const app = next({
        ...opts,
        hostname,
        customServer: false,
        httpServer: server,
        port: addr && typeof addr === 'object' ? addr.port : port,
      })
 
      requestHandler = app.getRequestHandler()
      upgradeHandler = app.getUpgradeHandler()
      resolve(app)
    })
 
    server.listen(port, opts.hostname)
  })
}

import type { Options as DevServerOptions } from './dev/next-dev-server'
import type { NodeRequestHandler } from './next-server'
import type { UrlWithParsedQuery } from 'url'
 
import './node-polyfill-fetch'
import { default as Server } from './next-server'
import * as log from '../build/output/log'
import loadConfig from './config'
import { resolve } from 'path'
import { NON_STANDARD_NODE_ENV } from '../lib/constants'
import { PHASE_DEVELOPMENT_SERVER } from '../shared/lib/constants'
import { PHASE_PRODUCTION_SERVER } from '../shared/lib/constants'
import { IncomingMessage, ServerResponse } from 'http'
import { NextUrlWithParsedQuery } from './request-meta'
import { shouldUseReactRoot } from './utils'
 
let ServerImpl: typeof Server
 
const getServerImpl = async () => {
  if (ServerImpl === undefined)
    ServerImpl = (await Promise.resolve(require('./next-server'))).default
  return ServerImpl
}
 
export type NextServerOptions = Partial<DevServerOptions>
 
export interface RequestHandler {
  (
    req: IncomingMessage,
    res: ServerResponse,
    parsedUrl?: NextUrlWithParsedQuery | undefined
  ): Promise<void>
}
 
**// 서버에 관련된 여러 메서드와 렌더링에 관련된 여러 메서드를 가진 NextServer 클래스**
export class NextServer {
  private serverPromise?: Promise<Server>
  private server?: Server
  private reqHandlerPromise?: Promise<NodeRequestHandler>
  private preparedAssetPrefix?: string
  public options: NextServerOptions
 
  constructor(options: NextServerOptions) {
    this.options = options
  }
 
  get hostname() {
    return this.options.hostname
  }
 
  get port() {
    return this.options.port
  }
 
  getRequestHandler(): RequestHandler {
    return async (
      req: IncomingMessage,
      res: ServerResponse,
      parsedUrl?: UrlWithParsedQuery
    ) => {
      const requestHandler = await this.getServerRequestHandler()
      return requestHandler(req, res, parsedUrl)
    }
  }
 
  getUpgradeHandler() {
    return async (req: IncomingMessage, socket: any, head: any) => {
      const server = await this.getServer()
      // @ts-expect-error we mark this as protected so it
      // causes an error here
      return server.handleUpgrade.apply(server, [req, socket, head])
    }
  }
 
  setAssetPrefix(assetPrefix: string) {
    if (this.server) {
      this.server.setAssetPrefix(assetPrefix)
    } else {
      this.preparedAssetPrefix = assetPrefix
    }
  }
 
  logError(...args: Parameters<Server['logError']>) {
    if (this.server) {
      this.server.logError(...args)
    }
  }
 
  async render(...args: Parameters<Server['render']>) {
    const server = await this.getServer()
    return server.render(...args)
  }
 
  async renderToHTML(...args: Parameters<Server['renderToHTML']>) {
    const server = await this.getServer()
    return server.renderToHTML(...args)
  }
 
  async renderError(...args: Parameters<Server['renderError']>) {
    const server = await this.getServer()
    return server.renderError(...args)
  }
 
  async renderErrorToHTML(...args: Parameters<Server['renderErrorToHTML']>) {
    const server = await this.getServer()
    return server.renderErrorToHTML(...args)
  }
 
  async render404(...args: Parameters<Server['render404']>) {
    const server = await this.getServer()
    return server.render404(...args)
  }
 
  async serveStatic(...args: Parameters<Server['serveStatic']>) {
    const server = await this.getServer()
    return server.serveStatic(...args)
  }
 
  async prepare() {
    const server = await this.getServer()
    return server.prepare()
  }
 
  async close() {
    const server = await this.getServer()
    return (server as any).close()
  }
 
  private async createServer(options: DevServerOptions): Promise<Server> {
    if (options.dev) {
      const DevServer = require('./dev/next-dev-server').default
      return new DevServer(options)
    }
    const ServerImplementation = await getServerImpl()
    return new ServerImplementation(options)
  }
 
  private async loadConfig() {
    return loadConfig(
      this.options.dev ? PHASE_DEVELOPMENT_SERVER : PHASE_PRODUCTION_SERVER,
      resolve(this.options.dir || '.'),
      this.options.conf
    )
  }
 
  private async getServer() {
    if (!this.serverPromise) {
      setTimeout(getServerImpl, 10)
      this.serverPromise = this.loadConfig().then(async (conf) => {
        this.server = await this.createServer({
          ...this.options,
          conf,
        })
        if (this.preparedAssetPrefix) {
          this.server.setAssetPrefix(this.preparedAssetPrefix)
        }
        return this.server
      })
    }
    return this.serverPromise
  }
 
  private async getServerRequestHandler() {
    // Memoize request handler creation
    if (!this.reqHandlerPromise) {
      this.reqHandlerPromise = this.getServer().then((server) =>
        server.getRequestHandler().bind(server)
      )
    }
    return this.reqHandlerPromise
  }
}
 
// This file is used for when users run `require('next')`
function createServer(options: NextServerOptions): NextServer {
  if (options == null) {
    throw new Error(
      'The server has not been instantiated properly. https://nextjs.org/docs/messages/invalid-server-options'
    )
  }
 
  if (
    !('isNextDevCommand' in options) &&
    process.env.NODE_ENV &&
    !['production', 'development', 'test'].includes(process.env.NODE_ENV)
  ) {
    log.warn(NON_STANDARD_NODE_ENV)
  }
 
  if (options.dev && typeof options.dev !== 'boolean') {
    console.warn(
      "Warning: 'dev' is not a boolean which could introduce unexpected behavior. https://nextjs.org/docs/messages/invalid-server-options"
    )
  }
 
  if (shouldUseReactRoot) {
    ;(process.env as any).__NEXT_REACT_ROOT = 'true'
  }
 
	**// NextServer 인스턴스를 반환하는 createServer 함수**
  return new NextServer(options)
}
 
// Support commonjs `require('next')`
module.exports = createServer
exports = module.exports
 
// Support `import next from 'next'`
export default createServer

// ...
 
export async function renderToHTML(
  req: IncomingMessage,
  res: ServerResponse,
  pathname: string,
  query: NextParsedUrlQuery,
  renderOpts: RenderOpts,
): Promise<RenderResult | null> {
  // ...
}

export async function renderToHTML( ... ) {
 
	// Head 태그 관련?
	const headTags = (...args: any) => callMiddleware('headTags', args)
 
	// getStaticProps로 처리한 부분에 관련한 로직
  const isSSG = !!getStaticProps
	// ...
	if (
    (isSSG || getServerSideProps) &&
    !isFallback &&
    process.env.NEXT_RUNTIME !== 'edge'
  ) {
    // Reads of this are cached on the `req` object, so this should resolve
    // instantly. There's no need to pass this data down from a previous
    // invoke, where we'd have to consider server & serverless.
    previewData = tryGetPreviewData(req, res, previewProps)
    isPreview = previewData !== false
  }
 
	// Provider를 통해 Context API로 상태를 주입하는 코드?
	const AppContainer = ({ children }: { children: JSX.Element }) => (
    <RouterContext.Provider value={router}>
      <AmpStateContext.Provider value={ampState}>
        <HeadManagerContext.Provider
          value={{
            updateHead: (state) => {
              head = state
            },
            updateScripts: (scripts) => {
              scriptLoader = scripts
            },
            scripts: initialScripts,
            mountedInstances: new Set(),
          }}
        >
          <LoadableContext.Provider
            value={(moduleName) => reactLoadableModules.push(moduleName)}
          >
            <StyleRegistry registry={jsxStyleRegistry}>
              <ImageConfigContext.Provider value={images}>
                {children}
              </ImageConfigContext.Provider>
            </StyleRegistry>
          </LoadableContext.Provider>
        </HeadManagerContext.Provider>
      </AmpStateContext.Provider>
    </RouterContext.Provider>
  )
 
	// getServerSideProps와 관련된 로직
	if (getServerSideProps) {
    props[SERVER_PROPS_ID] = true
  }
 
	if (getServerSideProps && !isFallback) {
		// ...
		try {
      data = await getServerSideProps({
        req: req as IncomingMessage & {
          cookies: NextApiRequestCookies
        },
        res: resOrProxy,
        query,
        resolvedUrl: renderOpts.resolvedUrl as string,
        ...(pageIsDynamic ? { params: params as ParsedUrlQuery } : undefined),
        ...(previewData !== false
          ? { preview: true, previewData: previewData }
          : undefined),
        locales: renderOpts.locales,
        locale: renderOpts.locale,
        defaultLocale: renderOpts.defaultLocale,
      })
      canAccessRes = false
    } catch (serverSidePropsError: any) {
      // remove not found error code to prevent triggering legacy
      // 404 rendering
      if (
        isError(serverSidePropsError) &&
        serverSidePropsError.code === 'ENOENT'
      ) {
        delete serverSidePropsError.code
      }
      throw serverSidePropsError
    }
	//...
	}
 
	// __next id를 가진 div를 찾았다
	const Body = ({ children }: { children: JSX.Element }) => {
    return inAmpMode ? children : <div id="__next">{children}</div>
  }
}