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

Remix框架实现 SSR

news 2025/7/7 9:49:56

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/6/23 4:26:10

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/6/30 11:49:08

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/7/6 5:55:08

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/6/17 15:33:10

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/6 6:06:39

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/7/7 4:55:40

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/6/27 10:32:23

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/7/5 2:56:19

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/7/4 13:13:42

springboot 日志类切面，接口成功记录日志，失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

编程新知 2025/7/6 3:16:39