个人建站前端篇(二)项目采用服务端渲染SSR

这篇具有很好参考价值的文章主要介绍了个人建站前端篇(二)项目采用服务端渲染SSR。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

SSR的优点

  1. 更好的SEO
  2. 首屏加载速度更快,用户体验更好
  3. 可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用,而不需要在后端模板系统和前端框架之间来回切换。

Vue生态中的SSR通用解决方案

  • Nuxt是一个构建于 Vue 生态系统之上的全栈框架
  • Quasar是基于 Vue 的完整解决方案
  • Vite 提供了内置的 Vue 服务端渲染支持,插件使用vite-plugin-ssr
    这里采用vite进行ssr改造

项目改造

安装开发服务器所需依赖

  • sirv 是一个优化过的轻量级中间件,用来处理静态资源请求
  • compression 是一个 Node.js 的中间件,用来对 HTTP 响应进行压缩
  • express 是 Node.js 的一个轻量级的 Web 服务器框架
  • cross-env 是一个跨平台的环境变量设置和使用工具
  • vite-plugin-ssr 是一个 Vite 插件,用于在 Vue 应用中启用服务端渲染(SSR)
    执行以下命令安装依赖:
npm install sirv compression express cross-env -D

接下来对于package.json中的构建命令进行改造

"scripts": {
  "dev": "node server",
  "build": "npm run build:client && npm run build:server",
  "build:client": "vite build --ssrManifest --outDir dist/client",
  "build:server": "vite build --ssr src/entry-server.ts --outDir dist/server",
  "preview": "cross-env NODE_ENV=production node server"
}

进行代码改造,在 src 目录下新建entry-client.ts和entry-server.ts两个入口文件。
其中entry-client.ts文件内容如下

import './style.css'
import { createApp } from './main'
const { app } = createApp()
app.mount('#app')

entry-server.ts文件内容如下

import { renderToString } from 'vue/server-renderer'
import { createApp } from './main'
export async function render() {
  const { app } = createApp()
  const ctx = {}
  const html = await renderToString(app, ctx)
  return { html }
}

修改main.ts文件,将Vue应用的入口文件改为entry-server.ts。

import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  return { app }
}

修改index.html引入入口js路径

<div id="app"><!--app-html--></div>
<script type="module" src="/src/entry-client.ts"></script>

提示

重点来了,和不是单纯的注释,而是占位符,需要替换成实际的内容。 这里和server.js里面的设置向对应

最后在项目根目录新建启动文件server.js

import fs from 'node:fs/promises'
import express from 'express'

// Constants
const isProduction = process.env.NODE_ENV === 'production'
const port = process.env.PORT || 3000
const base = process.env.BASE || '/'

// Cached production assets
const templateHtml = isProduction
  ? await fs.readFile('./dist/client/index.html', 'utf-8')
  : ''
const ssrManifest = isProduction
  ? await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8')
  : undefined

// Create http server
const app = express()

// Add Vite or respective production middlewares
let vite
if (!isProduction) {
  const { createServer } = await import('vite')
  vite = await createServer({
    server: { middlewareMode: true },
    appType: 'custom',
    base
  })
  app.use(vite.middlewares)
} else {
  const compression = (await import('compression')).default
  const sirv = (await import('sirv')).default
  app.use(compression())
  app.use(base, sirv('./dist/client', { extensions: [] }))
}

// Serve HTML
app.use('*', async (req, res) => {
  try {
    const url = req.originalUrl.replace(base, '')

    let template
    let render
    if (!isProduction) {
      // Always read fresh template in development
      template = await fs.readFile('./index.html', 'utf-8')
      template = await vite.transformIndexHtml(url, template)
      render = (await vite.ssrLoadModule('/src/entry-server.ts')).render
    } else {
      template = templateHtml
      render = (await import('./dist/server/entry-server.js')).render
    }

    const rendered = await render(url, ssrManifest)

    const html = template
      .replace(`<!--app-head-->`, rendered.head ?? '')
      .replace(`<!--app-html-->`, rendered.html ?? '')

    res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
  } catch (e) {
    vite?.ssrFixStacktrace(e)
    console.log(e.stack)
    res.status(500).end(e.stack)
  }
})

// Start http server
app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`)
})

运行npm run dev启动项目,查看源代码
如下图id为app的div标签中出现对应的内容就证明实现ssr了
个人建站前端篇(二)项目采用服务端渲染SSR,个人建站前端篇,前端,个人开发,vue,express,javascript

最后将项目部署到生产环境上,执行npm run build打包
将dist文件夹/package.json/server.js部署到node服务上,启动服务,访问项目,查看效果。
个人建站前端篇(二)项目采用服务端渲染SSR,个人建站前端篇,前端,个人开发,vue,express,javascript
个人建站前端篇(二)项目采用服务端渲染SSR,个人建站前端篇,前端,个人开发,vue,express,javascript

提示

如果不清楚如何部署node项目到服务,可以去看云风的知识库,里面有详细步骤文章来源地址https://www.toymoban.com/news/detail-827237.html

到了这里,关于个人建站前端篇(二)项目采用服务端渲染SSR的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在Vue 3中如何实现服务端渲染(SSR)

    今天我要给你们介绍一个很酷的功能——在Vue 3中实现服务端渲染(SSR) 首先,我们来聊聊SSR是什么。它就像是一个魔术师,能让你的网页在服务器上就预先渲染好,然后发送到客户端。想象一下,你在浏览一个网页,一点开链接,页面就直接出现在你面前,就像变魔术一样

    2024年02月13日
    浏览(43)
  • 单页面(SPA)与服务端渲染(SSR),概念、区别,优缺点

    什么是单页面应用? 什么是多页面应用? 二者有什么区别? 1、单页面应用与多页面应用: 单页面顾名思义就是整个应用只有一个Html页面,页面的切换其实是组件的切换。这样设计的好处就是不进行页面的切换应用会更加流畅,用户体验好,不需要记载整个页面。良好前后

    2024年02月14日
    浏览(47)
  • 个人建站实战,一文说明白:云服务器+域名+备案+SSL(Https)

    目录 一、前言 二、术语定义 1、服务器 2、云服务器 3、域名 4、备案 5、Https 6、网站程序 三、网站搭建 1、准备网站程序 2、买一台云服务器 3、把网站程序部署到云服务器上 4、注册域名 5、工信部备案 6、公安备案 7、Https 四、结语 昨天和闺女聊天,闺女说爸爸你后面的头

    2024年02月07日
    浏览(58)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(56)
  • Vue面试之csr与ssr渲染的区别

        最近在整理一些前端面试中经常被问到的问题,分为vue相关、react相关、js相关、react相关等等专题,可持续关注后续内容,会不断进行整理~ CSR(Client-Side Rendering)和SSR(Server-Side Rendering)是两种不同的前端渲染方式,它们在页面加载和渲染的过程中有一些显著的区别。

    2024年02月01日
    浏览(43)
  • 什么是 CSR、SSR、SSG、ISR - 渲染模式详解

    本文以 React 、 Vue 为例,介绍下主流的渲染模式以及在主流框架中如何实现上述的渲染模式。 看渲染模式之前我们先看下几个主流框架所提供的相关能力,了解的可跳到下个章节。 这是主流框架最基本的能力,就是将组件渲染到指定的 DOM 节点上。在 React 中所使用的 API 是

    2024年02月11日
    浏览(42)
  • 个人建站之域名购买、解析、备案、网站绑定

    从头开始学习个人建站全流程:选择域名服务商(阿里云、腾讯云)、购买域名、解析设置、备案流程详解,以及如何将域名绑定到云服务器。详细教程帮助您轻松搭建个人网站!

    2024年02月02日
    浏览(113)
  • 前端开发进阶:前端开发中如何高效渲染大数据量?

    在日常工作中,有时会遇到一次性往页面中插入大量数据的场景,在数栈的离线开发(以下简称离线)产品中,就有类似的场景。本文将通过分享一个实际场景中的前端开发思路,介绍当遇到大量数据时,如何实现高效的数据渲染,以达到提升页面性能和用户体验的目的。

    2024年02月11日
    浏览(43)
  • 前端项目如何准确预估个人工时

    看来很多小伙伴对这个问题感兴趣,大家不要忽视了压工时这个事。 领导为什么会压工时? 使他的KPI更好看 不清楚做这个东西实际要多长时间 因为第2点的原因,他也无法去争取合理时间 部分人看着下属加班,有种大权在握,言出法随的畅快感 码农为什么不要轻易答应压工

    2024年02月21日
    浏览(42)
  • 前端综合项目-个人博客网页设计

    个人博客前端部分设计 从零设计一个页面太难了,我们可以通过预预计的效果去写代码实现! 总不能没头没脑的边写边设计吧,总得有个参考 前端知识不做赘述了,大家可以去看看我之前写的前端博客 这只是我的设计,css更多定制内容,您可以灵活变通! 我的博客系统分

    2024年02月05日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包