반응 서버 렌더링을 구현하는 단계에 대한 자세한 설명

이번에는 React 서버 렌더링을 구현하는 단계에 대해 자세히 설명하고, React 서버 렌더링을 구현하기 위한 주의 사항은 무엇인지 살펴보겠습니다.

이 글은 React Server 렌더링을 처음부터 최소한으로 구현하는 튜토리얼을 소개합니다. 모두에게 도움이 되기를 바랍니다.

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

현실적이고 실용적인 태도로 React를 연구 대상으로 선택했습니다(주로 Vue를 많이 작성했기 때문에 역겹습니다). 그런 다음 최소한의 비용으로 간단히 React 서버 측 렌더링 데모를 작성하겠습니다

사용된 기술 스택

반응 16 + webpack3 + koa2

서버 측 렌더링을 구현하는 방법을 보려면 여기로 가십시오!

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

장점

2점밖에 안 돼요

1. SEO 친화적

2. 첫 번째 화면 렌더링 속도를 높이고 흰색 화면 시간을 줄입니다

그렇다면 SEO란 무엇인가

한 마디로, 현재 우리가 구축하는 대부분의 웹사이트는 SPA 웹사이트입니다. 모든 페이지와 데이터는 ajax에서 제공됩니다. 검색 엔진 스파이더가 웹페이지를 수집하러 오면 모두 비어 있다는 것을 알게 됩니다. 그렇다면 귀하의 웹사이트에 포함되는 무게와 효과가 좋다고 생각하시나요, 아니면 나쁘다고 생각하시나요?

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

하이라이트는 다음과 같습니다!

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

koa 환경 구축

새로운 ssr 프로젝트를 생성하고 프로젝트에서 npm을 초기화하세요

mkdir ssr && cd ssr
npm init

다음 코드에서는 node 환경에서 지원하지 않는 import jsx와 같은 구문을 사용하므로 babel을 구성해야 합니다

현재 프로젝트에 새 파일 app.js 및 index.js를 만든 다음

바벨의 입구인 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

를 만나보실 수 있습니다. 서비스 시작하기 참 쉽죠

React 설치

cnpm install react react-dom --save

루트 디렉터리에 새 앱 폴더를 만들고 폴더에 새 main.js를 만듭니다

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

import React from 'react'
export default class Home extends React.Component {
 render () {
  return <p>hello world</p>
 }
}

Server.js 수정 전

import Koa from 'koa'
import React from 'react'
import { renderToString } from 'react-dom/server'
import App from './app/main'
const app = new Koa()
// response
app.use(ctx => {
 let str = renderToString(<app></app>)
 ctx.body = str
})
app.listen(3000)
console.log('系统启动，端口：8080')

이때 npm run dev

화면에 hello world

가 나타나는 것을 볼 수 있습니다 요청을 보려면 Chrome 개발자 도구를 다시 엽니다.

가장 간단한 반응 구성 요소는 str이 되어 전달됩니다

여기서는 다음 방법을 사용합니다.

renderToString – 실제로 구성 요소를 string

으로 렌더링합니다. 지금까지는 이벤트와 같은 대화형 동작을 구성 요소에 추가하지 않았습니다. 다음에는 시도해 보겠습니다

main.js

import React from 'react'
export default class Home extends React.Component {
 render () {
  return <p> window.alert(123)}>hello world</p>
 }
}

코드 수정 페이지를 다시 새로고침해도 소용없어

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

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

说干就干

配制webpack

在根目录下面新建一个 webpack.config.js

下面是webpack.config.js的内容：

var path = require('path')
var webpack = require('webpack')
module.exports = {
 entry: {
  main: './app/index.js'
 },
 output: {
  filename: '[name].js',
  path: path.join(dirname, 'public'),
  publicPath: '/'
 },
 resolve: {
  extensions: ['.js', '.jsx']
 },
 module: {
  loaders: [
   {test: /\.jsx?$/,
    loaders: ['babel-loader'],
   }
  ]
 }
}

上面的配置将entry设置成了app/index.js文件

那我们就创建一个

下面是app/index.js的代码：

import Demo from './main'
import ReactDOM from 'react-dom'
import React from 'react'
ReactDOM.render(<demo></demo>, document.getElementById('root'))

因为浏览器渲染需要将根组件挂载到某个dom节点上，所以给我们的react代码设置一个入口

这个时候就有一个问题，就是，document对象node环境下并不存在，那怎么解决的呢？

不存在？不存在那我就不用就好了，SSR核心就是让请求的url里面返回具体HTML内容，事件什么的并不care，那么我就把根组件直接renderToString

返回出来就好了呗

下面修改我们的服务代码，让代码支持服务器渲染

新增一点依赖

cnpm i --save koa-static koa-views ejs

1. koa-static： 处理静态文件的中间件

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

3. ejs：一个模板引擎

修改server.js的代码

import Koa from 'koa'
import React from 'react'
import { renderToString } from 'react-dom/server'
import views from 'koa-views'
import path from 'path'
import Demo from './app/main'
const app = new Koa()
// 将/public文件夹设置为静态路径
app.use(require('koa-static')(dirname + '/public'))
// 将ejs设置为我们的模板引擎
app.use(views(path.resolve(dirname, './views'), { map: { html: 'ejs' } }))
// response
app.use(async ctx => {
 let str = renderToString(<demo></demo>)
 await ctx.render('index', {
  root: str
 })
})
app.listen(3000)
console.log('系统启动，端口：8080')

下面新建我们的渲染模板

新建一个views文件夹

里面新建一个index.html：

nbsp;html>


  <meta>
  <meta>
  <meta>
  <title>Document</title>
  <base>


  <p></p>
  <script></script>

这个 html 里面可以放一些变量，比如这个，就是等下要放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怎么支持呢 => 需要完善的生态

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

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

getBoundingClientRect使用方法及兼容性处理

vue的项目结构须知

vue实现购物车的小球抛物线效果详解

위 내용은 반응 서버 렌더링을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!