当前位置： 首页 > news >正文

Remix框架实现 SSR

news 2025/12/15 16:57:26

SSR

SSR是一种网页渲染方式，它与传统的客户端渲染（CSR）相对，在日常的项目中我们更多是使用 CSR 的方式进行前端分离开发，渲染会在浏览器端进行。然而在SSR中，当用户请求一个网页时，服务器将生成包含完整页面数据的HTML，然后发送给客户端浏览器。这种方法可以让网页内容直接从服务器加载，而不是在用户的浏览器上通过JavaScript动态生成。
由于搜索引擎优化对网页内容的可访问性有较高要求，SSR可以显著提升网站的SEO表现。搜索引擎在爬取和索引网站时，能够更容易地读取和解析服务器端渲染的页面。这是因为这些页面在到达用户浏览器之前，已经包含了所有的内容和结构信息。在以内容为主的项目中，例如 CMS、或者网站，SEO 非常重要，可以通过服务器模版引擎生成页面，但是模版引擎和现在前端开发框架，无论从提供的功能，还是代码扩展性都是云泥之别，相差甚远，本文将通过 Remix 前端框架实现一个服务端渲染的例子。

Remix

Remix 是基于 React 的前端开发框架，即支持 CSR 也支持 SSR。

创建一个简单 Remix 项目

创建目录并安装依赖。

mkdir my-remix-app
cd my-remix-app
npm init -y# install runtime dependencies
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom# install dev dependencies
npm i -D @remix-run/dev vite

创建Vite 配置文件。

touch vite.config.js

添加以下配置

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";export default defineConfig({plugins: [remix()],
});

创建根路由

mkdir app
touch app/root.jsx

添加以下内容

import {Links,Meta,Outlet,Scripts,
} from "@remix-run/react";export default function App() {return (<html><head><linkrel="icon"href="data:image/x-icon;base64,AA"/><Meta /><Links /></head><body><h1>Hello world!</h1><Outlet /><Scripts /></body></html>);
}

编译应用程序

npx remix vite:build

更新 package.json 中 type 为 module，这样 remix-serve 就可以启动我们的项目。

"type": "module"

运行程序

npx remix-serve build/server/index.js

创建测试组件 app/user.jsx

export default function User() {return (<div><h1>Usernames List</h1><ul><li>user1</li><li>user2</li></ul></div>);
}

添加组件到 root.jsx 中

import {Links,Meta,Outlet,Scripts,
} from "@remix-run/react";import User from "./user";export default function App() {return (<html><head><linkrel="icon"href="data:image/x-icon;base64,AA"/><Meta /><Links /></head><body><h1>Hello world!</h1><User/><Outlet /><Scripts /></body></html>);
}

重新编译后，刷新页面，可以看到 html 已经返回了。
在这里插入图片描述

Remix 原生支持 SSR，如果想要改为 CSR，修改 vite.config，添加配置项 ssr:false。

export default defineConfig({plugins: [remix({"ssr":false})],
});

编译后再次启动，之前生成的 Server 目录，在 SSR 关闭的情况下没有生成，从页面的源代码中，可以看到 tsx直接进行了引用，页面该需要前端 JS 进行渲染。
在这里插入图片描述
Remix 框架原生支持 SSR，只要了解 React ，Remix上手很快。

相关文章：

Remix框架实现 SSR

SSR SSR是一种网页渲染方式&#xff0c;它与传统的客户端渲染&#xff08;CSR&#xff09;相对&#xff0c;在日常的项目中我们更多是使用 CSR 的方式进行前端分离开发&#xff0c;渲染会在浏览器端进行。然而在SSR中&#xff0c;当用户请求一个网页时&#xff0c;服务器将生成…...

编程日记 2024/5/6 22:16:51

如何快速开发项目，提高开发效率

文章目录 一、问题描述二、问题解决1.需求分析2.架构设计3.技术选型4.正式开发 一、问题描述 有很多小伙伴在开发一个项目的时候&#xff0c;总是需要很长时间&#xff0c;效率很低&#xff0c;其实本质是没有掌握开发项目的关键和技巧 我下面列举一些问题&#xff0c;不知道…...

编程日记 2024/5/6 22:15:50

面试笔记——多线程使用场景

线程池使用场景&#xff08;CountDownLatch&#xff0c; Future&#xff09; CountDownLatch CountDownLatch&#xff08;闭锁/倒计时锁&#xff09;用来进行线程同步协作&#xff0c;等待所有线程完成倒计时&#xff08;一个或者多个线程&#xff0c;等待其他多个线程完成某件…...

编程日记 2024/5/6 22:12:42

02.0 基于Verilog控制LED灯每秒钟闪烁一次

本段代码是为Verilog初学者提供的一个名为led_blink简单实例Verilog模块&#xff0c;其功能是控制6个LED灯同步闪烁&#xff0c;每秒钟闪烁一次。 本例代码用于理解时序逻辑的概念&#xff0c;理解多个always模块完全并行执行的概念&#xff0c;讲授时可以与C语言的执行过程进行…...

编程日记 2024/5/6 22:11:41

C语言创建文件夹和多级目录

C调用系统命令创建多级目录 #include <stdio.h> #include <stdlib.h>int main() {const char *path "a/b/c";// 创建目录命令的字符串char mkdir_command[100];sprintf(mkdir_command, "mkdir %s", path);// 调用系统命令system(mkdir_comma…...

编程日记 2024/5/6 22:10:39

2024.5.6

#include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//设置窗口大小this->resize(1000,740);//设置窗口图标this->setWindowIcon(QIcon("C:\\Users\\Administrator\\Desktop\\pictrue\\Plants.png"));//设置窗口标题this-…...

编程日记 2024/5/6 22:09:36

mybatis配置获取自增主键

mybatis配置获取自增主键 【/n】 01 使用场景 当需要刚刚插入数据库的数据对应的新增主键时&#xff0c;通过配置xml文件&#xff0c;使数据库返回新增主键id&#xff0c;并把主键id与类参数对应 02 涉及配置 注解TableId(type IdType.AUTO)&#xff1a;在类主键id通过配…...

编程日记 2024/5/6 22:08:35

完整、免费的把pdf转word文档

在线工具网 https://www.orcc.online 支持pdf转word&#xff0c;免费、完整、快捷 登录网站 https://orcc.online 选择需要转换的pdf文件&#xff1a; 等待转换完成 点击蓝色文件即可下载 无限制&#xff0c;完整转换。...

编程日记 2024/5/6 22:07:33

使用 Lua 协程模拟 Golang 的 go defer 编程模式

封装 go 函数 在 使用 Lua 协程处理异步回调函数 中已经介绍 这里简要列下&#xff1a; 封装 go 函数---go 函数创建并启动一个协程 ---param _co_task function 函数原型 fun(_co:thread) function go(_co_task)local co coroutine.create(_co_task) -- 创建的协程是暂停的…...

编程日记 2024/5/6 22:05:30

网络通信协议，UDP和TCP，初步了解

UDP&#xff08;User Datagram Protocol&#xff09;和TCP&#xff08;Transmission Control Protocol&#xff09;是两种常见的网络通信协议&#xff0c;用于在计算机网络中进行数据传输。 1. TCP&#xff1a;Transmission Control Protocol&#xff08;传输控制协议&#xf…...

编程日记 2024/5/6 22:04:29

Golang | Leetcode Golang题解之第61题旋转链表

题目&#xff1a; 题解&#xff1a; func rotateRight(head *ListNode, k int) *ListNode {if k 0 || head nil || head.Next nil {return head}n : 1iter : headfor iter.Next ! nil {iter iter.Nextn}add : n - k%nif add n {return head}iter.Next headfor add > …...

编程日记 2024/5/6 22:03:28

美业SaaS系统多门店收银系统源码-【分润常见问题】讲解（一）

美业管理系统源码 博弈美业SaaS系统 连锁多门店美业收银系统源码 多门店管理 / 会员管理 / 预约管理 / 排班管理 / 商品管理 / 促销活动 PC管理后台、手机APP、iPad APP、微信小程序 ▶ 分润常见问题&#xff1a; 1、分润金额基数 所有分润计算的基数均为平台订单中各个商…...

编程日记 2024/5/6 22:00:24

Chatbot 在教育中的应用

Chatbot 在教育中的应用 基本信息 ​ 这篇博客主要介绍几篇Chatbot在教育领域中应用的文章&#xff0c;根据文章的侧重点不同&#xff0c;分为介绍教育理论&#xff0c;与介绍系统设计两类。从问题定义、技术方法、教育学理论、实验设计、结论证据几个方面概括各篇文章。 博…...

编程日记 2024/5/6 21:58:22

Apache和Nginx的区别以及如何选择

近来遇到一些客户需要lnmp环境的虚拟主机&#xff0c;但是Hostease这边的虚拟主机都是基于Apache的&#xff0c;尽管二者是不同的服务器软件&#xff0c;但是大多数情况下&#xff0c;通过适当的配置和调整两者程序也是可以兼容的。 目前市面上有许多Web服务器软件&#xff0c;…...

编程日记 2024/5/6 21:56:19

深入探索Element-UI：构建高效Web前端的利器

深入探索Element-UI&#xff1a;构建高效Web前端的利器 引言&#xff1a;前端框架的选择与Element-UI的定位一、Element-UI初探二、快速上手&#xff1a;安装与配置三、核心组件深度解析四、实用功能与进阶技巧五、性能优化与最佳实践六、实战案例分析七、与其他技术栈的集成 安…...

编程日记 2024/5/6 21:55:18

在Ubuntu 24.04 LTS (Noble Numbat)上安装nfs server以及nfs client

在Ubuntu 24.04 LTS (Noble Numbat)上，我使用的是最小化安装， 当然server版本的Ubuntu在安装的时候可能会有网络不通的问题，解决办法见如下文章： ubuntu 24.04 server 仅NAT模式上网设置静态IP设置-CSDN博客文章浏览阅读489次，点赞9次，收藏3次。在Ubuntu 24.04 上设置网…...

编程日记 2024/5/6 21:47:06

供应链｜经典论文解读：(s,S) 策略在动态库存下的最优性

文章考虑了具有订购成本&#xff08;由单位成本加上重新订购成本组成&#xff09;的动态库存问题。具体而言&#xff0c;对于每个时期&#xff0c;系统在中期开始是做出一系列采购决策——这些采购有助于库存的积累&#xff0c;并在随后的周期被需求所消耗。每时期系统会产生各…...

编程日记 2024/5/6 21:46:05

Python从0到100（二十）：文件读写和文件操作

一、文件的打开和关闭 有了文件系统可以非常方便的通过文件来读写数据&#xff1b;在Python中要实现文件操作是非常简单的。我们可以使用Python内置的open函数来打开文件&#xff0c;在使用open函数时&#xff0c;我们可以通过函数的参数指定文件名、操作模式和字符编码等信息…...

编程日记 2024/5/6 21:45:02

AI+客服行业落地应用

一、客服行业变迁 1.传统客服时代 &#xff08;1&#xff09;客服工作重复性高&#xff0c;技术含量低 &#xff08;2&#xff09;呼出效率低&#xff0c;客服水平参差不齐 &#xff08;3&#xff09;管理难度高&#xff0c;情绪不稳定 &#xff08;4&#xff09;服务质量…...

编程日记 2024/5/6 21:44:01

40 生产者消费者模型

生产者消费者模型 概念 为何要使用生产者消费者模型&#xff0c;这个是用过一个容器解决生产者和消费的强耦合问题。生产者和消费者之间不需要通讯&#xff0c;通过阻塞队列通讯&#xff0c;所以生产者生产完数据之后不用等待消费者处理&#xff0c;直接扔给阻塞队列&#xf…...

编程日记 2024/5/6 21:43:00

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/12/10 19:13:55

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/12/10 4:05:13

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/12/9 22:31:28

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/12/12 7:51:48

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/12/15 8:59:11

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/11/4 17:30:04

MySQL体系架构解析（三）：MySQL目录与启动配置全解析

MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录&#xff0c;这个目录下存放着许多可执行文件。与其他系统的可执行文件类似&#xff0c;这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中&#xff0c;用…...

编程新知 2025/12/13 16:56:01

【字节拥抱开源】字节团队开源视频模型 ContentV: 有限算力下的视频生成模型高效训练

本项目提出了ContentV框架&#xff0c;通过三项关键创新高效加速基于DiT的视频生成模型训练&#xff1a; 极简架构设计&#xff0c;最大化复用预训练图像生成模型进行视频合成系统化的多阶段训练策略&#xff0c;利用流匹配技术提升效率经济高效的人类反馈强化学习框架&#x…...

编程新知 2025/12/6 12:57:50