Skip to content

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 水和步骤吧

Released under the MIT License.