ssr 服务端渲染
搜索引擎的话对于我们的静态HTML的亲和度更高,但是通过javascript渲染是十分低的呐
什么是SPA呐
- SPA 就是我们的一个 single-page-application吧
- SPA 应用的话主要是使用的是我们的客户端的渲染模式吧: CSR-Client Side Rendering
- SPA 应用的开发的话主要是通过我们的服务器直接返回一个单页面HTML实现的呐,就类似于我们的vue 和 react 的开发模式吧
- 同时我们的SPA的页app设计的话主要是通过我们的 Javascript 实现的动态渲染吧
- 一个 SPA 界面的话主要是通过客户端的渲染,javascript 的动态更新实现吧
SPA 具备的优缺点
- 优点
- 只需要进行加载一次应用即可,因为请求后,我们的服务器是立马返回一个HTML页面的呐
- 同时使用路由进行动态的切换页面的时候,页面是不需要进行重新加载的呐
- 和原本的 web 应用做对比的话,好处就是只需要进行向服务器请求一次静态资源即可
- 同时具备更好的用户体验吧
- 缺点
- 不利于我们的SEO优化吧
- 同时SPA仅仅是返回一个HTML页面,这个时候呐,我们的一次性返回的资源是十分多的呐
- 此时就可能导致最终的首屏渲染问题的出现吧
- SPA是不利于进行构建我们的大型项目的呐,复杂的SPA应用难以维护吧
SEO优化实现
- 使用元素语义化标签
- h标签的合理使用,适当使用,不要大量使用
- meta元数据的配置: title, description, keywords
- 每个子页面具备我们的标题以及内部连接
- 标题是可以通过CSS实现隐藏的呐
- 使用文本标记元素以及img标签具备alt属性吧
- robots.txt 文档的配置,告诉搜索引擎,那些数据可以爬取
- sitemap.xml 文档的配置,告诉搜索引擎,我们的网站有哪些页面
SSG 静态站点生成
- SSG static site generation
- 可以使用我们的SSG技术实现我们的SEO优化吧
- SSG在程序的构建阶段就实现了我们的HTML页面的生成,预先把资源生成好,然后返回给客户端进行展示吧
- 优点
- 访问速度快,减少我们的服务器的资源占用,构建阶段就将每一个HTML文档生成好了
- 服务器直接将我们的HTML静态界面返回给客户端进行展示吧
- SSG保留了SPA页面的前端路由的特性吧
- 缺点
- 每次更新都需要进行重新构建
- 不可以展示实时性的内容,实时性内容还是使用SSR来实现才是可以的呐
- 技术栈选择: vitepree vuepress nextjs nuxtjs
SSR 服务端渲染
- SSR server side rendering
- 实现的就是将我们的页面的构建在服务端就直接完成,然后将静态页面返回给客户端展示的过程吧
- SSR有利于我们的SEO优化的呐
- 优点
- SSR 利于进行我们的SEO优化
- 用户在访问静态资源的时候,服务器立马将资源进行返回,不需要像SPA那样,将所有资源加载完后才进行渲染吧
- SSR 在 hydration后,保持了前端的SPA web界面的可交互性功能吧
- 缺点
- 服务器的压力过大,此时对服务器的要求就会更高吧
- 技术栈选型
- php jsp 实现
- nodejs express + webpack 来实现
- nuxtjs + vuejs | nextjs + reactjs 来实现吧
- 可以做的页面
- saas产品: 电子邮件,短信,电话
- 门户网站: 门户网站,博客网站,新闻网站,论坛网站
- 购物网站: 购物网站,商城网站,网店网站
- 官网界面的搭建
vue3 SSR搭建
- 在实现的时候,我们使用 createSSRApp 来进行创建我们的应用吧,通过该函数创建的就是我们的SSR应用了吧
createApp
创建对应的应用,直接挂载到页面的 div.app 中createSSRApp
创建对应的应用,在激活的状态下才进行挂载应用- 服务端通过最终的
renderTOString
方法进行激活应用吧 (@vue/server-renderer包中的呐
)
- 服务端通过最终的
- 首先搭建 node 后端服务
- 这里可以随意进行选择: express | koa 都是可以的呐
pnpm i express
pnpm install -D webpack-node-externals webpack-dev-server webpack webpack-cli
- webpack-node-externals: 忽略 node_modules 中的文件
pnpm i nodemon -D
- 准备SPA单页面环境
npm i vue vue-router vue-template-compiler
pnpm i vue-loader babel-loader @babel/core @babel/preset-env -D
npm i -D webpack-merge webpack-cli webpack-dev-server webpack-node-externals
- 同时还具备我们的一些 vue 相关的依赖吧
- vue-style-loader
- vue-loader
- css-loader
- style-loader
- VueLoaderPlugin
实现手动搭建的流程为
:- 先根据一个App.vue 进行创建
createSSRApp -> vue
ssr 应用 - 然后将该应用实现暴露给外放进行使用,注意,写成函数形式,防止应用
跨请求注入
- 在自己的 node 服务中引入app,将app使用
renderToString -> @vue/server-renderer
方法转化为页面 - 最后还需要进行的是对应用进行激活,否则响应式就会失效吧,这一步就是我们的
hydration
水和步骤吧
- 先根据一个App.vue 进行创建