생산 준비가 완료된 SSR React 애플리케이션 구축-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

생산 준비가 완료된 SSR React 애플리케이션 구축

Mary-Kate Olsen

Jan 05, 2025 am 11:51 AM

Building Production-Ready SSR React Applications

1밀리초가 중요한 세상에서 서버 측 렌더링은 프런트엔드 애플리케이션의 필수 기능이 되었습니다.

이 가이드는 React를 사용하여 프로덕션에 바로 사용할 수 있는 SSR을 구축하기 위한 기본 패턴을 안내합니다. SSR(예: Next.js)이 내장된 React 기반 프레임워크의 기본 원리를 이해하고 자신만의 맞춤형 솔루션을 만드는 방법을 배우게 됩니다.

제공된 코드는 프로덕션 준비가 되어 있으며 Dockerfile을 포함하여 클라이언트와 서버 부분 모두에 대한 완전한 빌드 프로세스를 갖추고 있습니다. 이 구현에서 Vite는 클라이언트 및 SSR 코드를 빌드하는 데 사용되지만 원하는 다른 도구를 사용할 수도 있습니다. Vite는 클라이언트의 개발 모드 중에 핫 리로딩도 제공합니다.

Vite가 없는 이 설정 버전에 관심이 있으시면 언제든지 문의해 주세요.

SSR이란 무엇입니까?

서버 측 렌더링(SSR)은 서버가 웹 페이지의 HTML 콘텐츠를 브라우저에 보내기 전에 생성하는 웹 개발 기술입니다. JavaScript가 빈 HTML 셸을 로드한 후 사용자 기기에 콘텐츠를 구축하는 기존 클라이언트 측 렌더링(CSR)과 달리 SSR은 서버에서 바로 완전히 렌더링된 HTML을 제공합니다.

SSR의 주요 이점:

향상된 SEO: 검색 엔진 크롤러는 완전히 렌더링된 콘텐츠를 수신하므로 SSR은 더 나은 색인 생성 및 순위입니다.
빠른 첫 번째 페인트: 서버가 무거운 작업을 처리하므로 사용자는 거의 즉시 의미 있는 콘텐츠를 볼 수 있습니다. 렌더링합니다.
향상된 성능: SSR은 브라우저의 렌더링 작업량을 줄여 웹사이트에 더욱 원활한 환경을 제공합니다. 오래되거나 성능이 떨어지는 장치를 사용하는 사용자.
원활한 서버-클라이언트 데이터 전송: SSR을 사용하면 동적 서버 측 데이터를 클라이언트에 전달할 필요 없이 클라이언트 번들을 재구축합니다.

앱 만들기

SSR을 사용하는 앱의 흐름은 다음 단계를 따릅니다.

템플릿 HTML 파일을 읽어보세요.
React를 초기화하고 앱 콘텐츠의 HTML 문자열을 생성합니다.
생성된 HTML 문자열을 템플릿에 삽입합니다.
완전한 HTML을 브라우저로 보냅니다.
클라이언트에서 HTML 태그를 일치시키고 애플리케이션에 수분을 공급하여 대화형으로 만듭니다.

VITE 초기화 중

저는 pnpm 및 React-swc-ts Vite 템플릿을 선호하지만 다른 설정을 선택할 수도 있습니다.

pnpm create vite react-ssr-app --template react-swc-ts

로그인 후 복사

종속성 설치:

pnpm create vite react-ssr-app --template react-swc-ts

로그인 후 복사

React 구성 요소 업데이트

일반적인 React 애플리케이션에는 index.html에 대한 단일 main.tsx 진입점이 있습니다. SSR을 사용하려면 두 개의 진입점이 필요합니다. 하나는 서버용이고 다른 하나는 클라이언트용입니다.

서버 진입점

Node.js 서버는 앱을 실행하고 React 구성 요소를 문자열(renderToString)로 렌더링하여 HTML을 생성합니다.

pnpm install

로그인 후 복사

클라이언트 진입점

브라우저는 서버에서 생성된 HTML을 수화하여 JavaScript와 연결하여 페이지를 대화형으로 만듭니다.

하이드레이션은 서버에서 렌더링한 정적 HTML에 이벤트 리스너 및 기타 동적 동작을 연결하는 프로세스입니다.

// ./src/entry-server.tsx
import { renderToString } from 'react-dom/server'
import App from './App'

export function render() {
  return renderToString(<App />)
}

로그인 후 복사

index.html 업데이트 중

프로젝트 루트에 있는 index.html 파일을 업데이트하세요. 자리 표시자는 서버가 생성된 HTML을 삽입하는 곳입니다.

// ./src/entry-client.tsx
import { hydrateRoot } from 'react-dom/client'
import { StrictMode } from 'react'
import App from './App'

import './index.css'

hydrateRoot(
  document.getElementById('root')!,
  <StrictMode>
    <App />
  </StrictMode>,
)

로그인 후 복사

서버에 필요한 모든 종속성은 클라이언트 번들에 포함되지 않도록 개발 종속성(devDependency)으로 설치해야 합니다.

다음으로, 프로젝트 루트에 ./server라는 폴더를 만들고 다음 파일을 추가하세요.

주 서버 파일 다시 내보내기

메인 서버 파일을 다시 내보냅니다. 이렇게 하면 명령 실행이 더욱 편리해집니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div>



<h3>
  
  
  Create Server
</h3>

<p>First, install the dependencies:<br>
</p>

<pre class="brush:php;toolbar:false">pnpm install -D express compression sirv tsup vite-node nodemon @types/express @types/compression

로그인 후 복사

상수 정의

HTML_KEY 상수는 index.html의 자리표시자 주석과 일치해야 합니다. 다른 상수는 환경 설정을 관리합니다.

// ./server/index.ts
export * from './app'

로그인 후 복사

익스프레스 서버 생성

개발 및 프로덕션 환경에 맞게 다양한 구성으로 Express 서버를 설정하세요.

// ./server/constants.ts
export const NODE_ENV = process.env.NODE_ENV || 'development'
export const APP_PORT = process.env.APP_PORT || 3000

export const PROD = NODE_ENV === 'production'
export const HTML_KEY = `<!--app-html-->`

로그인 후 복사

개발 모드 구성

개발 중에는 Vite의 미들웨어를 사용하여 요청을 처리하고 핫 리로드를 통해 index.html 파일을 동적으로 변환합니다. 서버는 React 애플리케이션을 로드하고 각 요청마다 HTML로 렌더링합니다.

// ./server/app.ts
import express from 'express'
import { PROD, APP_PORT } from './constants'
import { setupProd } from './prod'
import { setupDev } from './dev'

export async function createServer() {
  const app = express()

  if (PROD) {
    await setupProd(app)
  } else {
    await setupDev(app)
  }

  app.listen(APP_PORT, () => {
    console.log(`http://localhost:${APP_PORT}`)
  })
}

createServer()

로그인 후 복사

생산 모드 구성

프로덕션에서는 압축을 사용하여 성능을 최적화하고 sirv를 사용하여 정적 파일을 제공하며 사전 구축된 서버 번들을 사용하여 앱을 렌더링합니다.

// ./server/dev.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import { HTML_KEY } from './constants'

const HTML_PATH = path.resolve(process.cwd(), 'index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'src/entry-server.tsx')

export async function setupDev(app: Application) {
  // Create a Vite development server in middleware mode
  const vite = await (
    await import('vite')
  ).createServer({
    root: process.cwd(),
    server: { middlewareMode: true },
    appType: 'custom',
  })

  // Use Vite middleware for serving files
  app.use(vite.middlewares)

  app.get('*', async (req, res, next) => {
    try {
      // Read and transform the HTML file
      let html = fs.readFileSync(HTML_PATH, 'utf-8')
      html = await vite.transformIndexHtml(req.originalUrl, html)

      // Load the entry-server.tsx module and render the app
      const { render } = await vite.ssrLoadModule(ENTRY_SERVER_PATH)
      const appHtml = await render()

      // Replace the placeholder with the rendered HTML
      html = html.replace(HTML_KEY, appHtml)
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      // Fix stack traces for Vite and handle errors
      vite.ssrFixStacktrace(e as Error)
      console.error((e as Error).stack)
      next(e)
    }
  })
}

로그인 후 복사

빌드 구성

애플리케이션 구축 모범 사례를 따르려면 불필요한 패키지를 모두 제외하고 애플리케이션에서 실제로 사용하는 패키지만 포함해야 합니다.

Vite 구성 업데이트 중

빌드 프로세스를 최적화하고 SSR 종속성을 처리하려면 Vite 구성을 업데이트하세요.

// ./server/prod.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import compression from 'compression'
import sirv from 'sirv'
import { HTML_KEY } from './constants'

const CLIENT_PATH = path.resolve(process.cwd(), 'dist/client')
const HTML_PATH = path.resolve(process.cwd(), 'dist/client/index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'dist/ssr/entry-server.js')

export async function setupProd(app: Application) {
  // Use compression for responses
  app.use(compression())
  // Serve static files from the client build folder
  app.use(sirv(CLIENT_PATH, { extensions: [] }))

  app.get('*', async (_, res, next) => {
    try {
      // Read the pre-built HTML file
      let html = fs.readFileSync(HTML_PATH, 'utf-8')

      // Import the server-side render function and generate HTML
      const { render } = await import(ENTRY_SERVER_PATH)
      const appHtml = await render()

      // Replace the placeholder with the rendered HTML
      html = html.replace(HTML_KEY, appHtml)
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      // Log errors and pass them to the error handler
      console.error((e as Error).stack)
      next(e)
    }
  })
}

로그인 후 복사

tsconfig.json 업데이트 중

서버 파일을 포함하도록 tsconfig.json을 업데이트하고 TypeScript를 적절하게 구성하세요.

pnpm create vite react-ssr-app --template react-swc-ts

로그인 후 복사

tsup 구성 생성 중

TypeScript 번들러인 tsup을 사용하여 서버 코드를 빌드합니다. noExternal 옵션은 서버와 함께 번들로 제공할 패키지를 지정합니다. 서버에서 사용하는 추가 패키지를 반드시 포함하세요.

pnpm install

로그인 후 복사

빌드 스크립트 추가

// ./src/entry-server.tsx
import { renderToString } from 'react-dom/server'
import App from './App'

export function render() {
  return renderToString(<App />)
}

로그인 후 복사

애플리케이션 실행

개발: 핫 리로딩으로 애플리케이션을 시작하려면 다음 명령을 사용하세요.

// ./src/entry-client.tsx
import { hydrateRoot } from 'react-dom/client'
import { StrictMode } from 'react'
import App from './App'

import './index.css'

hydrateRoot(
  document.getElementById('root')!,
  <StrictMode>
    <App />
  </StrictMode>,
)

로그인 후 복사

프로덕션: 애플리케이션 빌드 및 프로덕션 서버 시작:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div>



<h3>
  
  
  Create Server
</h3>

<p>First, install the dependencies:<br>
</p>

<pre class="brush:php;toolbar:false">pnpm install -D express compression sirv tsup vite-node nodemon @types/express @types/compression

로그인 후 복사

SSR이 작동하는지 확인하려면 서버에 대한 첫 번째 네트워크 요청을 확인하세요. 응답에는 애플리케이션의 완전히 렌더링된 HTML이 포함되어야 합니다.

라우팅

앱에 다른 페이지를 추가하려면 라우팅을 올바르게 구성하고 클라이언트 및 서버 진입점 모두에서 이를 처리해야 합니다.

// ./server/index.ts
export * from './app'

로그인 후 복사

클라이언트 측 라우팅 추가

클라이언트측 라우팅을 활성화하려면 클라이언트 진입점에서 BrowserRouter로 애플리케이션을 래핑하세요.

// ./server/constants.ts
export const NODE_ENV = process.env.NODE_ENV || 'development'
export const APP_PORT = process.env.APP_PORT || 3000

export const PROD = NODE_ENV === 'production'
export const HTML_KEY = `<!--app-html-->`

로그인 후 복사

서버측 라우팅 추가

서버 측 라우팅을 처리하려면 서버 진입점에서 StaticRouter를 사용하세요. 요청에 따라 올바른 경로를 렌더링하려면 URL을 소품으로 전달하세요.

// ./server/app.ts
import express from 'express'
import { PROD, APP_PORT } from './constants'
import { setupProd } from './prod'
import { setupDev } from './dev'

export async function createServer() {
  const app = express()

  if (PROD) {
    await setupProd(app)
  } else {
    await setupDev(app)
  }

  app.listen(APP_PORT, () => {
    console.log(`http://localhost:${APP_PORT}`)
  })
}

createServer()

로그인 후 복사

서버 구성 업데이트

요청 URL을 렌더링 기능에 전달하도록 개발 및 프로덕션 서버 설정을 모두 업데이트하세요.

// ./server/dev.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import { HTML_KEY } from './constants'

const HTML_PATH = path.resolve(process.cwd(), 'index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'src/entry-server.tsx')

export async function setupDev(app: Application) {
  // Create a Vite development server in middleware mode
  const vite = await (
    await import('vite')
  ).createServer({
    root: process.cwd(),
    server: { middlewareMode: true },
    appType: 'custom',
  })

  // Use Vite middleware for serving files
  app.use(vite.middlewares)

  app.get('*', async (req, res, next) => {
    try {
      // Read and transform the HTML file
      let html = fs.readFileSync(HTML_PATH, 'utf-8')
      html = await vite.transformIndexHtml(req.originalUrl, html)

      // Load the entry-server.tsx module and render the app
      const { render } = await vite.ssrLoadModule(ENTRY_SERVER_PATH)
      const appHtml = await render()

      // Replace the placeholder with the rendered HTML
      html = html.replace(HTML_KEY, appHtml)
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      // Fix stack traces for Vite and handle errors
      vite.ssrFixStacktrace(e as Error)
      console.error((e as Error).stack)
      next(e)
    }
  })
}

로그인 후 복사

이러한 변경 사항을 통해 이제 React 앱에서 SSR과 완벽하게 호환되는 경로를 생성할 수 있습니다. 그러나 이 기본 접근 방식은 지연 로드된 구성 요소(React.lazy)를 처리하지 않습니다. 지연 로드된 모듈을 관리하려면 하단에 링크된 다른 기사 Advanced React SSR Techniques with Streaming and Dynamic Data를 참조하세요.

도커

애플리케이션을 컨테이너화하기 위한 Dockerfile은 다음과 같습니다.

// ./server/prod.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import compression from 'compression'
import sirv from 'sirv'
import { HTML_KEY } from './constants'

const CLIENT_PATH = path.resolve(process.cwd(), 'dist/client')
const HTML_PATH = path.resolve(process.cwd(), 'dist/client/index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'dist/ssr/entry-server.js')

export async function setupProd(app: Application) {
  // Use compression for responses
  app.use(compression())
  // Serve static files from the client build folder
  app.use(sirv(CLIENT_PATH, { extensions: [] }))

  app.get('*', async (_, res, next) => {
    try {
      // Read the pre-built HTML file
      let html = fs.readFileSync(HTML_PATH, 'utf-8')

      // Import the server-side render function and generate HTML
      const { render } = await import(ENTRY_SERVER_PATH)
      const appHtml = await render()

      // Replace the placeholder with the rendered HTML
      html = html.replace(HTML_KEY, appHtml)
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      // Log errors and pass them to the error handler
      console.error((e as Error).stack)
      next(e)
    }
  })
}

로그인 후 복사

Docker 이미지 빌드 및 실행

// ./vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { dependencies } from './package.json'

export default defineConfig(({ mode }) => ({
  plugins: [react()],
  ssr: {
    noExternal: mode === 'production' ? Object.keys(dependencies) : undefined,
  },
}))

로그인 후 복사

{
  "include": [
    "src",
    "server",
    "vite.config.ts"
  ]
}

로그인 후 복사

결론

이 가이드에서는 React를 사용하여 프로덕션에 바로 사용할 수 있는 SSR 애플리케이션을 만들기 위한 강력한 기반을 구축했습니다. 프로젝트 설정, 라우팅 구성, Dockerfile 생성 방법을 배웠습니다. 이 설정은 랜딩 페이지나 소규모 앱을 효율적으로 구축하는 데 이상적입니다.

코드 탐색

예: 반응-ssr-기본-예
템플릿: 반응-ssr-템플릿
Vite Extra 템플릿: template-ssr-react-ts

연결 상태 유지

저는 항상 피드백, 협업 또는 기술 아이디어 논의에 열려 있습니다. 언제든지 연락주세요!

포트폴리오: maxh1t.xyz
이메일: m4xh17@gmail.com

위 내용은 생산 준비가 완료된 SSR React 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1672

Cakephp 튜토리얼

1428

라라벨 튜토리얼

1332

PHP 튜토리얼

1276

C# 튜토리얼

1256

Related knowledge

Python vs. JavaScript : 학습 곡선 및 사용 편의성 Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

JavaScript 및 웹 : 핵심 기능 및 사용 사례 Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트 Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 엔진 이해 : 구현 세부 사항 Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스 Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

Python vs. JavaScript : 개발 환경 및 도구 Apr 26, 2025 am 12:09 AM

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할 Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션 Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

See all articles

생산 준비가 완료된 SSR React 애플리케이션 구축

목차

SSR이란 무엇입니까?

앱 만들기

VITE 초기화 중

React 구성 요소 업데이트

서버 진입점

클라이언트 진입점

index.html 업데이트 중

주 서버 파일 다시 내보내기

상수 정의

익스프레스 서버 생성

개발 모드 구성

생산 모드 구성

빌드 구성

Vite 구성 업데이트 중

tsconfig.json 업데이트 중

tsup 구성 생성 중

빌드 스크립트 추가

애플리케이션 실행

라우팅

클라이언트 측 라우팅 추가

서버측 라우팅 추가

서버 구성 업데이트

도커

결론

코드 탐색

관련 기사

연결 상태 유지

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제