웹 프론트엔드 JS 튜토리얼 반응 서버 렌더링의 기본 방법 구현

반응 서버 렌더링의 기본 방법 구현

Jan 31, 2018 am 10:23 AM
react 베이스 섬기는 사람

이 글은 주로 React Server Rendering의 상세한 구현을 처음부터 소개하는 내용입니다. 편집자는 꽤 좋다고 생각하여 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

머리말

최근에 Koa를 작성하면서, 제가 만든 코드의 일부는 API를 제공하고 일부는 SSR을 지원한다면 어떻게 작성해야 할까요? (두 개의 서비스로 분할하고 싶지 않다면)
그리고 최근에 작성한 nuxt 등의 프로젝트에서도 일부 서버사이드 렌더링을 사용했고, 다음 프로젝트에서도 작업한 것이 사실입니다. 개발 경험은 매우 친절하지만, 구체적으로 어떻게 달성되었는지 생각해 본 적이 있나요?

진실을 추구하고 실용적인 태도에 맞춰 나는 연구 대상으로 React를 선택했습니다(주로 Vue가 너무 많이 작성되어 역겹기 때문입니다). 그러면 나는 간단히 React 서버 측 렌더링 데모를 작성하겠습니다. 최소 비용

사용된 기술 스택

react 16 + webpack3 + koa2

서버사이드 렌더링을 어떻게 구현하는지 살펴보겠습니다.

서버사이드 렌더링을 사용하는 이유

장점

은 2점에 불과합니다

  1. SEO 친화적

  2. 첫 화면 렌더링 속도를 높이고 화이트 스크린 시간을 줄입니다

그러면 SEO란 무엇인가

한마디로 말하면, 지금 우리가 구축하는 대부분의 웹사이트는 모든 페이지와 데이터가 ajax에서 나옵니다. 그 사람들은 그것들이 모두 비어 있다고 생각하나요? 그렇다면 귀하의 웹사이트에 포함되는 무게와 효과가 좋다고 생각하시나요, 아니면 나쁘다고 생각하시나요?

SEO 최적화의 핵심은 다음 내용에도 설명되어 있습니다.

다음은 핵심 사항입니다!

서버가 콘텐츠가 포함된 HTML을 우리에게 반환하도록 합니다. 이벤트가 발생하면 브라우저는 마운트를 위해 이를 다시 렌더링합니다.

koa 환경을 구축합니다.

새 ssr 프로젝트를 생성하고 프로젝트에서 npm을 초기화합니다.


mkdir ssr && cd ssr
npm init
로그인 후 복사

다음 코드에서는 import jsx와 같은 구문을 사용하는데, 이는 node 환경에서 지원하지 않기 때문에 babel

현재 프로젝트에 app.js, index.js 파일을 새로 생성해야 합니다, 그리고

babel의 입구인 index.js 코드는 다음과 같습니다


require('babel-core/register')()

require('babel-polyfill')
require('./app')
로그인 후 복사

우리 프로젝트의 입구인 app.js 코드는 다음과 같습니다


import Koa from 'koa'
const app = new Koa()

// response
app.use((ctx) => {
 ctx.body = 'Hello Koa'
})

app.listen(3000)
console.log("系统启动,端口:3000")
로그인 후 복사

루트에 새로운 .babelrc 파일을 생성합니다 디렉토리

내용은 다음과 같습니다.


{
 "presets": ["react", "env"]
}
로그인 후 복사

위에 필요한 종속성을 설치합니다.


npm install babel-core babel-polyfill babel-preset-env babel-preset-react nodemon --save-dev
npm i koa --save
로그인 후 복사

시작 스크립트 구성

package.json


"scripts": {
 "dev": "nodemon index.js",
}
로그인 후 복사

여기에서 npm run dev를 실행하고 localhost를 엽니다. 3000

안녕하세요 Koa

시작하기 매우 간단하지 않나요? 서비스

Install React


cnpm install react react-dom --save
로그인 후 복사

루트 디렉터리에 새 앱 폴더를 만들고, 새 메인을 만듭니다. 폴더

main.js 코드는 다음과 같습니다


import React from 'react'

export default class Home extends React.Component {
 render () {
  return <p>hello world</p>
 }
}
로그인 후 복사

수정 이전에 server.js


import Koa from &#39;koa&#39;
import React from &#39;react&#39;
import { renderToString } from &#39;react-dom/server&#39;
import App from &#39;./app/main&#39;

const app = new Koa()

// response
app.use(ctx => {
 let str = renderToString(<App />)

 ctx.body = str
})

app.listen(3000)

console.log(&#39;系统启动,端口:8080&#39;)
로그인 후 복사

이때 npm run dev

화면에 hello world가 보일 겁니다

요청을 보려면 Chrome 개발자 도구를 엽니다.

우리의 가장 간단한 반응 구성 요소는 str로 전달됩니다.

여기에서는 다음 메서드를 사용합니다.

renderToString - 실제로 구성 요소를 a로 렌더링하는 것입니다. string

지금까지 구성 요소에 이벤트 및 기타 대화형 동작을 추가하지 않았습니다. 다음에는 시도해 보겠습니다

main.js의 코드를 수정하세요


import React from &#39;react&#39;

export default class Home extends React.Component {
 render () {
  return <p onClick={() => window.alert(123)}>hello world</p>
 }
}
로그인 후 복사

페이지를 다시 새로 고치세요. 어, 쓸모가 없나요

백엔드는 구성 요소를 하나의 HTML 문자열로만 렌더링할 수 있기 때문에 이벤트 바인딩 및 기타 작업은 브라우저 측에서 실행되어야 합니다. 그러면 이벤트를 어떻게 바인딩합니까?

그러면 서버가 html 문자열을 렌더링하므로 이벤트를 마운트하는 방법은 브라우저에서 이벤트를 한 번 다시 렌더링하는 것이라고 추측할 수 있습니다.

그냥 하세요

웹팩 구성

새로 만들기 루트 디렉토리 아래의 webpack.config.js


다음은 webpack.config.js의 내용입니다:


var path = require(&#39;path&#39;)
var webpack = require(&#39;webpack&#39;)

module.exports = {
 entry: {
  main: &#39;./app/index.js&#39;
 },
 output: {
  filename: &#39;[name].js&#39;,
  path: path.join(__dirname, &#39;public&#39;),
  publicPath: &#39;/&#39;
 },
 resolve: {
  extensions: [&#39;.js&#39;, &#39;.jsx&#39;]
 },
 module: {
  loaders: [
   {test: /\.jsx?$/,
    loaders: [&#39;babel-loader&#39;],
   }
  ]
 }
}
로그인 후 복사

위 구성은 항목을 app/index.js 파일로 설정합니다

그런 다음 그냥 생성합니다 하나

다음은 app/index.js의 코드입니다.


import Demo from &#39;./main&#39;
import ReactDOM from &#39;react-dom&#39;
import React from &#39;react&#39;
ReactDOM.render(<Demo />, document.getElementById(&#39;root&#39;))
로그인 후 복사

브라우저 렌더링에서는 루트 구성 요소를 dom 노드에 마운트해야 하므로 리액트 코드에 대한 입구를 설정합니다

이 문제가 발생했습니다 그 당시에는 노드 환경에 문서 객체가 존재하지 않았는데 어떻게 해결해야 할까요?

존재하지 않나요? 존재하지 않으면 필요하지 않습니다. SSR의 핵심은 요청된 URL에 특정 HTML 콘텐츠를 반환하는 것입니다. 이벤트나 그와 유사한 내용은 신경 쓰지 않으므로 루트 구성 요소만 반환합니다. 아래의 renderToString


으로 직접 서버 렌더링을 지원하도록 서비스 코드를 수정하세요

몇 가지 종속성 추가


cnpm i --save koa-static koa-views ejs
로그인 후 복사
  1. koa-static: 处理静态文件的中间件

  2. koa-views: 配置模板的中间件

  3. ejs:一个模板引擎

修改server.js的代码


import Koa from &#39;koa&#39;
import React from &#39;react&#39;
import { renderToString } from &#39;react-dom/server&#39;
import views from &#39;koa-views&#39;
import path from &#39;path&#39;

import Demo from &#39;./app/main&#39;
const app = new Koa()
// 将/public文件夹设置为静态路径
app.use(require(&#39;koa-static&#39;)(__dirname + &#39;/public&#39;))
// 将ejs设置为我们的模板引擎
app.use(views(path.resolve(__dirname, &#39;./views&#39;), { map: { html: &#39;ejs&#39; } }))

// response
app.use(async ctx => {
 let str = renderToString(<Demo />)
 await ctx.render(&#39;index&#39;, {
  root: str
 })
})

app.listen(3000)

console.log(&#39;系统启动,端口:8080&#39;)
로그인 후 복사

下面新建我们的渲染模板

新建一个views文件夹

里面新建一个index.html:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <base href="/client" rel="external nofollow" >
</head>
<body>
  <p id="root"><%- root %></p>
  <script src="/main.js"></script>
</body>
</html>
로그인 후 복사

这个 html 里面可以放一些变量,比如这个<%- root %>,就是等下要放renderToString结果的地方

/main.js则是react构建出来的代码

下面直接来测试一下我们的代码

1. 在 package.json里面

新增:


 "scripts": {
  "dev": "nodemon index.js",
  "build": "webpack"
 },
로그인 후 복사

2. 运行 npm run build, 构建出我们的react代码

3. npm run dev

点击一下代码,是不是会 alert(123)

 tada 撒花,恭喜你,一个最简单服务器渲染就已经完成

到这里核心的思想就都已经讲完了,总结来说就下面三点:

  1. 起一个node服务

  2. 把react 根组件 renderToString渲染成字符串一起返回前端

  3. 前端再重新render一次

原理就是这么简单

但是具体开发的时候还会有各种各样的需求,比如:

  1. 不可能我每次改完代码都重新构建看效果吧 => 需要 实时构建

  2. create-react-app 都是热更新,你还要刷新是不是太蠢了 => 需要支持热更新

  3. 其他一些配套的周边,如: react-router, redux 或者mobx怎么支持呢 => 需要完善的生态

.etc

这些问题都是用完 官方脚手架之后就回不去了的,所以更多的配置可以参考下面的repo(是一个工具链完善的最小实现),欢迎提PR

GitHub - ws456999/koa-react-ssr-starter: to understand && to explain how react ssr works

目前你可以在里面找到 react + react-router + mobx + postcss + 热更新的配置,除了react-router的配置有些差别,其他都跟client端差别不大

相关推荐:

react后端渲染模板引擎noox发布使用方法

React前后端同构防止重复渲染

浏览器渲染性能优化

위 내용은 반응 서버 렌더링의 기본 방법 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

RPC 서버 연결 불가 및 데스크탑 진입 불가 현상에 대한 해결 방법 RPC 서버 연결 불가 및 데스크탑 진입 불가 현상에 대한 해결 방법 Feb 18, 2024 am 10:34 AM

RPC 서버를 사용할 수 없고 데스크톱에서 접속할 수 없는 경우 어떻게 해야 합니까? 최근 몇 년 동안 컴퓨터와 인터넷이 우리 생활 곳곳에 침투했습니다. RPC(원격 프로시저 호출)는 중앙 집중식 컴퓨팅 및 리소스 공유를 위한 기술로서 네트워크 통신에서 중요한 역할을 합니다. 그러나 때때로 RPC 서버를 사용할 수 없어 데스크탑에 들어갈 수 없는 상황이 발생할 수 있습니다. 이 문서에서는 이 문제의 가능한 원인 중 일부를 설명하고 해결 방법을 제공합니다. 먼저 RPC 서버를 사용할 수 없는 이유를 이해해야 합니다. RPC 서버는

Dnsmasq를 DHCP 릴레이 서버로 구성하는 방법 Dnsmasq를 DHCP 릴레이 서버로 구성하는 방법 Mar 21, 2024 am 08:50 AM

DHCP 릴레이의 역할은 두 서버가 서로 다른 서브넷에 있더라도 수신된 DHCP 패킷을 네트워크의 다른 DHCP 서버로 전달하는 것입니다. DHCP 릴레이를 사용하면 네트워크 센터에 중앙 집중식 DHCP 서버를 배포하고 이를 사용하여 모든 네트워크 서브넷/VLAN에 IP 주소를 동적으로 할당할 수 있습니다. Dnsmasq는 네트워크에서 동적 호스트 구성을 관리하는 데 도움이 되도록 DHCP 릴레이 서버로 구성할 수 있는 일반적으로 사용되는 DNS 및 DHCP 프로토콜 서버입니다. 이 기사에서는 dnsmasq를 DHCP 릴레이 서버로 구성하는 방법을 보여줍니다. 내용 항목: 네트워크 토폴로지 중앙 집중식 DHCP 서버의 DHCP 릴레이 D에서 고정 IP 주소 구성

PHP를 사용한 IP 프록시 서버 구축을 위한 모범 사례 가이드 PHP를 사용한 IP 프록시 서버 구축을 위한 모범 사례 가이드 Mar 11, 2024 am 08:36 AM

네트워크 데이터 전송에서 IP 프록시 서버는 사용자가 실제 IP 주소를 숨기고 개인정보를 보호하며 액세스 속도를 향상시키는 데 도움을 주는 중요한 역할을 합니다. 이 기사에서는 PHP를 사용하여 IP 프록시 서버를 구축하는 방법에 대한 모범 사례 가이드를 소개하고 구체적인 코드 예제를 제공합니다. IP 프록시 서버란 무엇입니까? IP 프록시 서버는 사용자와 대상 서버 사이에 위치한 중간 서버로서 사용자와 대상 서버 사이의 전송 스테이션 역할을 하며 사용자의 요청과 응답을 전달합니다. IP 프록시 서버를 사용하여

에픽서버가 오프라인 상태일 때 게임에 접속할 수 없으면 어떻게 해야 하나요? 에픽게임즈가 오프라인으로 게임에 입장할 수 없는 이유에 대한 해결책 에픽서버가 오프라인 상태일 때 게임에 접속할 수 없으면 어떻게 해야 하나요? 에픽게임즈가 오프라인으로 게임에 입장할 수 없는 이유에 대한 해결책 Mar 13, 2024 pm 04:40 PM

에픽서버가 오프라인 상태일 때 게임에 접속할 수 없으면 어떻게 해야 하나요? 이 문제는 많은 친구들이 겪었을 것입니다. 이 메시지가 나타나면 정품 게임을 시작할 수 없습니다. 이 문제는 일반적으로 네트워크 및 보안 소프트웨어의 간섭으로 인해 발생합니다. 이 문제의 편집자는 어떻게 설명합니까? 저는 여러분과 솔루션을 공유하고 싶습니다. 오늘의 소프트웨어 튜토리얼이 문제 해결에 도움이 되기를 바랍니다. 에픽 서버가 오프라인일 때 게임에 들어갈 수 없는 경우 해결 방법: 1. 게임 플랫폼과 보안 소프트웨어의 방해를 받을 수 있습니다. 2. 두 번째는 네트워크 변동이 너무 심하다는 것입니다. 라우터를 다시 시작하여 작동하는지 확인해보세요. 조건이 괜찮다면 5g 모바일 네트워크를 사용해 작동해 보세요. 3. 그럼 더 있을 수도 있겠네요

PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? Mar 15, 2024 pm 05:48 PM

PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? 인터넷 기술이 지속적으로 발전함에 따라 프런트엔드 프레임워크는 웹 개발에서 중요한 역할을 합니다. PHP, Vue, React는 세 가지 대표적인 프론트엔드 프레임워크로 각각 고유한 특성과 장점을 가지고 있습니다. 사용할 프런트 엔드 프레임워크를 선택할 때 개발자는 프로젝트 요구 사항, 팀 기술 및 개인 선호도를 기반으로 정보를 바탕으로 결정을 내려야 합니다. 이 글에서는 세 가지 프론트엔드 프레임워크인 PHP, Vue, React의 특징과 용도를 비교해보겠습니다.

Java 프레임워크와 프런트엔드 React 프레임워크의 통합 Java 프레임워크와 프런트엔드 React 프레임워크의 통합 Jun 01, 2024 pm 03:16 PM

Java 프레임워크와 React 프레임워크의 통합: 단계: 백엔드 Java 프레임워크를 설정합니다. 프로젝트 구조를 만듭니다. 빌드 도구를 구성합니다. React 애플리케이션을 만듭니다. REST API 엔드포인트를 작성합니다. 통신 메커니즘을 구성합니다. 실제 사례(SpringBoot+React): Java 코드: RESTfulAPI 컨트롤러를 정의합니다. React 코드: API에서 반환된 데이터를 가져오고 표시합니다.

서버에 PHP FFmpeg 확장을 설치하는 방법은 무엇입니까? 서버에 PHP FFmpeg 확장을 설치하는 방법은 무엇입니까? Mar 28, 2024 pm 02:39 PM

서버에 PHPFFmpeg 확장을 설치하는 방법은 무엇입니까? 서버에 PHPFFmpeg 확장을 설치하면 PHP 프로젝트에서 오디오 및 비디오 파일을 처리하고 오디오 및 비디오 파일의 인코딩, 디코딩, 편집 및 처리와 같은 기능을 구현하는 데 도움이 될 수 있습니다. 이 기사에서는 서버에 PHPFFmpeg 확장을 설치하는 방법과 구체적인 코드 예제를 소개합니다. 먼저, PHP와 FFmpeg가 서버에 설치되어 있는지 확인해야 합니다. FFmpeg가 설치되어 있지 않은 경우 아래 단계에 따라 FFmpe를 설치할 수 있습니다.

Golang 서버의 장점과 활용성에 대한 자세한 설명 Golang 서버의 장점과 활용성에 대한 자세한 설명 Mar 20, 2024 pm 01:51 PM

Golang은 Google이 개발한 오픈 소스 프로그래밍 언어로 효율적이고 빠르며 강력하며 클라우드 컴퓨팅, 네트워크 프로그래밍, 빅 데이터 처리 및 기타 분야에서 널리 사용됩니다. 강력한 형식의 정적 언어인 Golang은 서버측 애플리케이션을 구축할 때 많은 이점을 제공합니다. 이 기사에서는 Golang 서버의 장점과 유용성을 자세히 분석하고 특정 코드 예제를 통해 Golang 서버의 성능을 설명합니다. 1. 고성능 Golang 컴파일러는 코드를 로컬 코드로 컴파일할 수 있습니다.

See all articles