简单反应式SSR服务器渲染实现

为什么是SSR

在单页应用程序中，UI层和内容由javascript呈现，搜索引擎或web爬虫需要完成HTML结构。因此，如果单页应用只在客户端呈现，不利于SEO。此外，虽然我们可以通过按需加载来减少主页上加载的js，但是用js渲染DOM还是会有一定的时间延迟。

0.前言

服务器端渲染不仅仅是项目中需要的，有时还需要进行服务器端渲染。当然，在项目中进行服务器端渲染有很多好处

第一屏加载快，比SPA单页应用有优势。SEO优化有利于爬虫和抓取数据。1.介绍

服务器端呈现是指在服务器端呈现和生成页面，并将呈现的页面返回给客户端。

2.装置

在安装的时候，版本都是最新的版本，但是新版本的很多方法和API都被放弃更新了，导致最终的项目无法运行。

NPM inst-save-dev koanpm inst-save-dev babel-corenpm inst-save-dev babel-polyilnpm inst-save-dev babel-preset-stage-2npm inst-save-dev babel-preset-react # Oryard add-dev koayard add-dev babel-core yard add-dev babel-polyilder add-dev babel-preset-stage-node yard add-dev babel-dev-stage-2 yard add配置

安装完成后，编写一个启动文件start.js:

//start . js require(' babel-core/register ')({ ignore :[/node _ modules/]，presets: [ 'stage-2 '，' react '，[ 'latest-node '，{ ' target ' : ' current ' }]})；require(' babel-poly ill ')；要求('。/./index ')；编写一个条目文件index.js

//index . jsimport ' Koa '中的Koa；从“React”导入React；从“react-dom/server”导入ReactDOMServerconst { renderToString }=ReactDOMServer；const app=new Koa()；app . use(CTX={ CTX . body=renderToString(div h1 hello，World/h1/div)；});app.listen(3000，()={ console . log(' server run in 3000 ')；});执行npm启动启动项目

脚本' : { '开始' : '节点。/src/start.js'}，4。结果

打开浏览器查看http://localhost:3000/

5.结论

此时，一个简单的反应SSR已经完成。当然，也可以使用其他方式来实现React服务器渲染，比如Next.js

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。