天天看点

Node服务端渲染

服务端渲染(SSR):浏览器向服务器发出请求页面,服务端将准备好的模板和数据组装成完整的HTML返回给浏览器展示

相对于客户端渲染的优势:

1.更利于SEO

2.更利于首屏渲染

SSR基本项目搭建:

首先本地配置好node环境,创建空文件夹nodeServerRenderer,

VSCode打开项目,执行npm init,生成package.json

Node服务端渲染

执行命令npm install koa koa-bodyparser koa-router nunjucks -S  安装相关依赖包

在根目录下创建views文件夹,在该文件夹下创建login.html   login_result.html两个文件用于页面渲染

Node服务端渲染
Node服务端渲染

在根目录下创建routerConfig文件夹,在该文件夹下创建login.js   loginResult.js文件用于路由配置

Node服务端渲染
Node服务端渲染

创建renderServer.js做统一渲染响应对应的html文件的处理工具

Node服务端渲染

创建ViewController.js用于注册routerConfig文件夹下的所有路由

Node服务端渲染

创建app.js集成koa,将renderServer和viewController配置到koa,端口设置为3000

Node服务端渲染

打开终端,输入命令node app.js,启动服务

Node服务端渲染

在浏览器中数据localhost:3000就可以看到我们的页面了

Node服务端渲染

源码地址: https://github.com/kyrieLiu/nodeServerRenderer.git