没有 Javascript 的通用 React

Question

当我的服务器呈现的通用 React 页面的客户端 Javascript 已禁用时，调用不同 CSS 的最佳做法是什么？

我试过在 html 标签上包含带有 className="no-js" 的 Modernizr，但它没有被编辑。

我已经设法让一些东西工作，如下所示，但必须有更好的方法。

<link rel="stylesheet" href="/public/css/script.css" />
<noscript>
  <link rel="stylesheet" href="/public/css/noscript.css" />
</noscript>

我查找了示例，但未找到任何相关内容。

Answer 1

在服务器呈现的应用程序中，您可以拥有众多数据源之一：

查询参数
cookie
POST数据

The only input for server side code is the request made when loading up a page in your app in your browser. You may choose to configure the server during its boot (such as when you are running in a development vs. production environment), but that configuration is static.

The request contains information about the URL requested, including any query parameters, which will be useful when using something like React Router. It can also contain headers with inputs like cookies or authorization, or POST body data.

在 script/noscript 映射中，您可以设置几个默认值之一：

将 noscript 渲染为默认值，然后通过 CSSOM
默认提供 noscript 特定路由，然后跳转到基于 cookie 的脚本路由
创建一个向服务器发布脚本功能的表单，然后将其用作跳转页面以避免标记 noscript/script

参考文献

redux / Server Rendering: Processing Request Parameters
Rendering noscript version serverside without reuse markup warnings in React

没有 Javascript 的通用 React

Universal React without Javascript

noscript

modernizr

reactjs