1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
SSR과 CSR은 웹 페이지 렌더링 방식입니다. 그중 CSR(Client-side Rendering)은 서버에서 받은 HTML과 JS 등을 클라이언트 측에서 웹 콘텐츠를 렌더링 하는 방식입니다.
► CSR의 장점
- 페이지 로드가 완료되면 전체 페이지를 다시 로드하지 않고 데이터만 서버에서 가져오기 때문에 후속 상호 작용이 더 빨라집니다.
- UI 구성 요소의 렌더링이 클라이언트 측에서 발생하기 때문에 전체 페이지를 다시 로드하지 않고도 부드러운 전환, 애니메이션 및 동적 업데이트가 가능합니다.
► CSR의 단점
- 서버에서 렌더링 한 페이지를 전단해 주는 SSR과 달리 클라이언트 측에서 웹 페이지를 렌더링 하는데 필요한 JS 파일 및 종속성을 다운로드해야 하고 브라우저는 페이지를 렌더링 하기 전에 모든 스크립트를 가져와서 실행해야 해서 SSR보다 로드 시간이 길다.
- 처음에 완전한 콘텐츠 없이 빈 HTML 파일을 제공해서 사전 렌더링 또는 동적 렌더링과 같은 적절한 기술이 구현되지 않으면 검색 엔진 최적화(SEO)에 문제가 발생할 수 있다.
2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
SSR(Server Side Rendering)은 서버 쪽에서 콘텐츠를 생성하고 완전한 웹 페이지를 클라이언트에 보내는 방식으로 서버에서 요청을 처리하고 클라이언트로 보내면 렌더링 된 콘텐츠가 표시됩니다.
SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유는 다음과 같습니다.
- 서버에서 초기 HTML 콘텐츠를 생성해 클라이언트로 보낼 수 있어 검색 엔진 최적화(SEO)가 가능합니다.
- 사전에 렌더링 된 HTML을 클라이언트로 전송해 초기 콘텐츠를 표시하는 데 필요한 시간을 줄일 수 있습니다.
3. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
npm run start로 실행되는 코드를 찾아보는 과제를 받아서 조금 당황했고 어떻게 수행을 해야 할지 몰라 다른 분들의 과제를 찾아보았습니다.
packages/next/src/cli/next-start.ts
import arg from 'next/dist/compiled/arg/index.js'
import { startServer } from '../server/lib/start-server'
import { getPort, printAndExit } from '../server/lib/utils'
import isError from '../lib/is-error'
import { getProjectDir } from '../lib/get-project-dir'
import { CliCommand } from '../lib/commands'
import { resolve } from 'path'
import { PHASE_PRODUCTION_SERVER } from '../shared/lib/constants'
import loadConfig from '../server/config'
const nextStart: CliCommand = async (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']
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
const config = await loadConfig(
PHASE_PRODUCTION_SERVER,
resolve(dir || '.'),
undefined,
undefined,
true
)
await startServer({
dir,
nextConfig: config,
isDev: false,
hostname: host,
port,
keepAliveTimeout,
useWorkers: !!config.experimental.appDir,
})
}
export { nextStart }
가장 중요한 부분은 startServer 부분이었고 추가로 start-server.ts 파일도 함께 확인해 보았습니다.
packages/next/src/server/lib/start-server.ts
next.js 설치
npx create-next-app@latest
앱 실행 후 빌드 오류 해결 과정
npm install next --save-dev
npx next build
npm run start
실행이 잘 되는 것을 확인할 수 있습니다.
728x90
'FE Study > Next.js' 카테고리의 다른 글
[Next] Next 패키지 최적화(optimizePackageImports) (26) | 2024.04.05 |
---|