标签: server-side-rendering

我有 CRA 背景，正在努力学习 Next.js 版本 9.4.2

我的项目树看起来像这样：-

pages/
    _app.tsx
    index.tsx
components/
    Navbar/
        index.ts
        Navbar.tsx
        Navbar.scss

在我的里面Navbar.tsx我有一个声明import './Navbar.scss';

这给了我以下错误：-

./src/components/Navbar/Navbar.scss
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.tsx.
Read more: https://err.sh/next.js/css-global
Location: src/components/Navbar/Navbar.tsx

如前所述，如果我将语句import Navbar.scss移至pages/_app.tsx

我知道我可以切换到Navbar.module.scss，但我不想走模块化 scss 的路线，因为我希望我的 scss 变得复杂，我想坚持我编写 scss 的方式，而不是继续寻找解决方法以后可能出现的问题。我愿意在这里被说服，但我还没有找到很好的读物来选择它作为我的道路。

因此，从外观来看，我坚持将所有<component>.scss文件导入_app.tsx. 这将为我留下一长串<component>.scss导入列表_app.tsx，并且我还将留下许多<component>.scss可能有条件不渲染的组件文件。

我在这里有什么选择？

在生产中，react_devtools_backend.js 无论如何都会加载，这会减慢我的网站在生产中的速度。如何禁用加载此反应开发工具？我正在使用react 16.8、reactSSR、webpack 4.29、apollo

我已经用过

 new webpack.DefinePlugin({
      '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
    }),

和

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
    for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
        window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
    }
}

和

<script>
        if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
            __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
        }
</script>

和这个

const disableReactDevTools = (): void => {
    const noop = (): void => undefined;
    const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;

    if (typeof DEV_TOOLS === 'object') { …

我正在使用material-ui@v5，即。阿尔法分支。

目前，我有一个自定义Timeline组件可以执行以下操作：

const CustomTimeline = () => {
  const mdDown = useMediaQuery(theme => theme.breakpoints.down("md"));

  return (
    <Timeline position={mdDown ? "right" : "alternate"}>
      {/* some children */}
    </Timeline>
  );
};

它基本上按预期工作，但移动用户可能会遇到布局变化，因为它useMediaQuery是使用 JS 实现的并且仅在客户端。我想寻求与上述代码等效的 CSS 实现，以便与 SSR 一起使用。

我想到了以下几点：

const CustomTimeline = () => {

  return (
    <Fragment>
      <Timeline sx={{ display: { xs: "block", md: "none" } }} position="right">
        {/* some children */}
      </Timeline>
      <Timeline sx={{ display: { xs: "none", md: "block" } }} position="alternate">
        {/* …

我是 Next.js 的新手，正在将 JWT 授权令牌存储在客户端 React 上下文中，并希望将该令牌从客户端上下文“传递”到服务器组件，以便可以从服务器组件检索它通过headers()或cookies()函数。

我假设我需要在仅限客户端的代码上“设置”这些标头和 cookie，但是如何设置呢？

我更喜欢使用，headers()因为我可以控制何时/是否发送凭据；对于 cookie，我假设它总是随每个请求一起发送。

Next.js 13 的稳定版本有一个身份验证文档，但我已经从不使用getServerSideProps().

稳定的文档也提到了iron-session，我通过一个如何在 Next.js 13 中读取 cookie 的示例发现了这个问题，但它没有显示如何设置它。

tl;dr如何在客户端设置标头和 cookie，以便可以通过服务器组件中的headers()或函数读取它们？cookies()

我为angular2组件开发了一个解析器,它将它们呈现在我的HTML文件中.到目前为止,我能够以HTML格式呈现它们

import {Component} from 'angular2/core';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from 'angular2/common';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'app',    
    template: `
            <div>
                <div>
                    <img src={{record}} class="pull-left image-responsive" style="width:50%;"> 
                    <img src={{record}} class="pull-right image-responsive" style="width:30%;">
                </div>
                <div>
                    <img src={{record}} class="pull-right image-responsive" style="width:100%;">
                </div>
                <br/><br/>
                <div>
                    <table class="table-responsive" style="width:100%;border-collapse:separate;border:solid #D8D8D8 2px;border-radius:5px;">
                        <tr style="background-color: grey;">
                            <th style="text-align:center;">{{record}}</th>
                            <th style="border-left:2px solid #f5821f;text-align:center;">{{record}}</th>
                        </tr>
                        <tr style="text-align:center;">
                            <td >&nbsp;</td>
                            <td style="border-left:2px solid #f5821f;">&nbsp;</td>
                        </tr>
                    </table>
                </div>
                <br/>
             </div>
           `
 })
export class App{ …

我有一个使用ngExpressEngine服务的Angular 5应用程序(遵循Angular Universal启动项目).我的应用程序有一个组件,它发出HTTP请求以显示一些数据.一切正常,但当我使用fetch作为谷歌机器人时,它返回渲染的页面,但没有数据.是否有任何使ngExpressEngine服务器在将页面呈现给用户之前等待HTTP请求？

我正在使用react-boilerplate(使用react-router,sagas,express.js)作为我的React应用程序,并且在它之上我添加了SSR逻辑,这样一旦它收到HTTP请求,它就会根据URL呈现反应组件到字符串并发送HTML字符串返回客户端.

虽然反应呈现在服务器端发生,但它也fetch通过传真向一些API(基于URL的最多5个端点)发出请求,以便在组件实际呈现组件之前获取组件的数据.

如果我同时向Node服务器发出几个请求,那么一切都很好,但是一旦我模拟了100多个并发请求的加载并且它开始处理它,那么在某些时候它会崩溃而没有任何异常的迹象.

我在尝试调试应用程序时注意到的是,一旦节点服务器开始处理100多个传入请求,它就会同时向API发送请求,但在停止堆叠这些请求之前不会收到任何实际响应.

用于在服务器端呈现的代码:

async function renderHtmlDocument({ store, renderProps, sagasDone, assets, webpackDllNames }) {
  // 1st render phase - triggers the sagas
  renderAppToString(store, renderProps);

  // send signal to sagas that we're done
  store.dispatch(END);

  // wait for all tasks to finish
  await sagasDone();

  // capture the state after the first render
  const state = store.getState().toJS();

  // prepare style sheet to collect generated css
  const styleSheet = new ServerStyleSheet();

  // 2nd render phase - the sagas triggered …

我正在运行React应用程序的服务器端渲染。我正在express为此目的使用。整个服务器端渲染代码如下所示：

import * as React from "react"
import * as ReactDOMServer from "react-dom/server"
import * as express from "express"
import { StaticRouter } from "react-router-dom"
import walker = require("react-tree-walker")
import { useStaticRendering } from "mobx-react"

import Helmet from "react-helmet"
import Provider from "../src/Provider"
import { StaticRouterContext } from "react-router"
import version = require("../version")

var _template: string = require(`../dist/${version.v()}/index.html`)

interface IRenderResponse {
    statusCode: number,
    template: string,
    redirect?: string
}

const run = (url: string, locale?: string): Promise<IRenderResponse> => { …

我最近通过Cloud Functions和Firebase Hosting实现了SSR。

构建JS捆绑包时，它会收到一个缓存突发后缀（main.1.js）。

在我的函数内部，我有以下代码用于缓存Cloud Function的结果

res.set('Cache-Control', 'public, max-age=300, s-maxage=300');

在部署期间，我先部署托管，然后再部署云功能

firebase deploy --only hosting:production && gcloud functions deploy ssr --runtime nodejs8 --trigger-http --source dist/server

Firebase托管部署替换main.1.js为main.2.js。

由于缓存破裂，文件现在有所不同（main.2.js），但是由于云功能又被缓存了5分钟-访问网站时出现错误（因为main.1.js该功能的缓存版本中已引用该功能不再可用） 。

您将如何解决此问题？我可以有两个活动的部署并一个接一个地激活吗？

我正在 React 中设置一个新应用程序，我希望它在服务器端呈现。不幸的是，我无法使用Headers，因为它不断抛出错误“ReferenceError: Headers is not defined”。

我已经尝试通过添加以下内容来添加标题：

import fetch from 'node-fetch';

global.fetch = fetch
global.Headers = fetch.Headers;

尽管如此，这仍然会引发错误。

这是我目前如何实现标头的示例：

const defaultOptions = {
  method: METHOD,
  headers: new Headers({
    'Content-type': 'application/json',
    'X-Request-ID': new Date().getTime().toString(),
  }),
};

有谁知道我缺少什么来构建和启动它？