CSR/SSG/SSR

CSR-客户端渲染

1.client side render: 客户端渲染
SPA :single page app
优点：页面只需要加载一次，首屏渲染快
缺点：不利于seo,(初次加载只渲染了个空页面)
2.seo的爬取原理：
a.通过自动化爬取工具爬取页面
b.建立索引：通过页面中的title a img h1-h6去筛选页面，不满足的从临时库中删掉，其他的进入索引中
c.呈现搜索结果
3.给网页做seo优化：
a.使用语义化的标签
b.加title标签 meta标签的keyword description
c.img alt属性，a标签正确的链接地址，b标签的使用
d.项目根目录下添加robots.txt(网上自动生成这个文件)，规定爬虫可访问您网站上的哪些网址
e.项目根目录下添加sitemap.xml站点地图：在站点地图上列出所有网页，确保爬虫不会落掉某些网页

SSG-静态站点生成

ssg: static site generate，是预先生成好的静态网站。
构建ssg应用常见的库和框架： vue nuxt、react next.js
优点：访问速度快，直接给浏览器返回静态的html,也有利于seo
缺点：页面是静态的，不利于展示实时性的内容，实时性的更适合ssr。如果站点更新了，那必须得重新再次构建和部署

SSR-服务端渲染

在服务端渲染页面，并将渲染好的HTML返回给浏览器呈现，客户端请求js资源实现水合，页面可以实时交互，也叫同构应用
步骤：
用户打开浏览器访问服务器，服务器生成一个html返回给浏览器，浏览器渲染静态页面，但是目前是没有交互的，发现页面有一些js资源，去请求，请求来之后就可以激活应用程序，才变成可交互的页面
优点：更快的首屏渲染速度，更好的seo
缺点：增加了一定的开发成本，消耗更多的服务器资源

Node Server的实现

// 初始化项目
npm install webpack webpack-cli nodemon express webpack-node-externals
// src/index.js
const express = requie('express')
const app = express()
app.get('/', (req, res) => {res.send('hello world~')
})
app.listen(3000, () => {console.log('3000端口启动成功！')
})
// package.json配置启动，验证上面是否启动成功
"scripts": {"dev": "nodemon ./src/index.js" // 实时监听这个文件的变化
}// config/webpack.config.js 打包后端服务
const path = require('path')
const webpackNodeExternals = require('webpack-node-externals')
module.exports = {target: 'node', // 默认是web-浏览器环境 作用是解析遇到node的内置模块（path, fs）就不会被打包进去mode: 'production',entry: './src/index.js'，output: {filename: 'server_bundle.js',path: path.resolve(__dirname, '../build/server')}externals: [webpackNodeExternals()] // 不需要打包进bundle.js的库
}// 使用webpack打包试试
// 配置一下打包脚本 package.json
"script": {..."build:server": "webpack --config ./config/webpack.config.js ./src/index.js --watch", // --watch是webpack的脚本命令"start": "nodemon ./build/server.js" // node 没有--watch, 所以用了nodemon
}

CSR/SSG/SSR相关推荐

前端页面渲染的几种方式（CSR/SSG/SSR）
客户端渲染 CSR (Croswer Side Render) 是在单页应用中使用最多的渲染方式,我们现在的项目常用使用了react.vue之类的单页应用的框架,这类框架在进行页面渲染时,会到首先对h ...
【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
前言本来只是想学习 React-Router v6 ,没有想到,带出了这么多东西.前后端路由有什么区别?SPA与MPA的是什么?在了解到前端路之后又发现单页面于应用与多页面应用的不同之处,以及 .n ...
2022年的CSR和SSR
早期的SSR 一般说前后端不分离,指的是早期的开发模式,即前端代码写完后嵌入到后端的JSP/PHP中.由后端服务渲染完数据后直接返回一个完整的HTML页面,里面的数据都已经渲染好了. 例如,如下是一个 ...
前端渲染CSR和SSR的结合使用分析
小聊: 我们都知道,以往的CSR(客户端浏览器渲染)多多少少会有一点点 SEO 问题,不只是 SPA(单页面应用程序),只不过 SPA 的 SEO 问题比较严重,一般的前端项目有很多个页面,渲染的压力 ...
CSR、SSR、NSR、ESR傻傻分不清楚，一文帮你理清前端渲染方案！
01 引言随着前端系统的越发复杂,前端的性能也受到越来越多的重视.Google也不断在推进新的性能相关指标,从原先的Performance API中的指标逐步演进成用户性能体验相关的指标. 对于用户 ...
前端页面渲染方式CSR、SSR、SSG
三种渲染方式: 使用预渲染之前,首先要考虑是否真的需要它. 如果初始加载时的额外几百毫秒并不会对应用产生影响,这种情况下去使用预选染将是一个小题大作之举. 首屏加载时间是绝对关键的指标,在这种情况下, ...
看了就会的Next.js SSR SSG实战教程
Next.js是基于React的服务端渲染工具.在传统的React项目中,例如使用Create-React-App创建的项目,最终build生成的静态文件,是基于浏览器渲染的,即所谓的CSR(Clie ...
浅析客户端渲染（CSR）与服务端渲染（SSR）
最近刚好公司有项目需要用到服务端渲染,于是花了些时间了整理了关于服务端渲染与客户端渲染的知识,现在记录下来,希望能帮助大家提升对浏览器渲染,服务端渲染的理解,在项目选型上做出正确的决策. 本文会涉及这 ...
SSR 应用与原 CSR 应用变更同步问题实践
在上一篇介绍<天猫汽车商详页的SSR改造实践>一文中提到过,为免影响线上应用,我们的一体化应用(后面简称称 SSR 应用)是在原 CSR 项目基础上另起的应用仓库. 背景当商详业务有新需 ...

CSR/SSG/SSR

CSR-客户端渲染

SSG-静态站点生成

SSR-服务端渲染

Node Server的实现

CSR/SSG/SSR相关推荐

最新文章

热门文章