标签: server-side-rendering

因此，我基于这个NextJS 示例构建了一个 Next 应用程序，这意味着我有 GraphQL 路由和一个用于从应用程序中的 API 获取数据的 Apollo 服务器。该示例展示了如何在 getStaticProps() 中获取，这对我来说效果很好，但我需要实现 getServerSideProps()，因为提供的内容取决于 URL 查询和参数，最多有 6000 个不同的 URL，因此我无法使用 getStaticPaths()。该代码在开发模式下工作完全正常...但是，当部署到 Vercel 时，它在开始时工作，有时在稍后工作，但 95% 的时间在页面上显示 504 BAD GATEWAY 错误。

[s]/[v].tsx 的代码：https://pastecord.com/uwojuzudaw.typescript

我正在尝试在 Next.js 项目中实现 redux-toolkit，同时又不会失去从外部 API 获取数据的 SSR 选项。我遵循了 next.js GitHub 中的示例，但这样做导致在我的 redux 切片中获取数据时没有 SSR。我想知道如何获取数据并将该数据保存在 Redux 状态中。这就是我写的：这是 store.js 文件

export const store = configureStore({
  reducer: {
    users: usersReducer,
  },
});

_app.js 文件

import { Provider } from 'react-redux';
import { store } from '../app/store';

const MyApp = ({ Component, pageProps }) => {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
};

export default MyApp;

usersSlice.js 文件

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

const initialState = {
  items: null, …

官方 Apollo 和 NextJS 建议在每次执行 GraphQL 请求时创建一个新的 ApolloClient 实例，以防使用 SSR。

这通过内存使用显示了良好的结果，内存增长了一定量，然后使用垃圾收集器重置到初始级别。

问题在于初始内存使用水平不断增长，并且调试器显示泄漏是由附加到 ApolloClient 实例作为缓存存储的“InMemoryCache”对象引起的。

我们尝试对所有新的 Apollo 实例使用相同的“InMemoryCache”实例，并尝试禁用“defaultOptions”中的缓存自定义策略，但泄漏仍然存在。

是否可以完全关闭缓存？比如在 ApolloClient 初始化中为“cache”选项设置“false”值？或者也许这是已知解决方案的已知问题，并且可以通过定制“InMemoryCache”来解决？

我们尝试了很多选项，例如强制缓存垃圾回收、驱逐缓存中的对象等，但没有任何帮助，泄漏仍然存在。

谢谢你！

根据nextjs文档，如果我想将环境变量公开给浏览器，我可以NEXT_PUBLIC在.env.local文件中添加它们的前缀，如下所示：

NEXT_PUBLIC_VAR=7

但是，看起来我也可以使用 向浏览器公开我的环境变量next.config.js，如下所示：

NEXT_PUBLIC_VAR=7

这将添加到 javascript 包中

这两种策略有什么区别？

我用来react-pdf通过 CRA 在 React 中渲染 PDF，然后像这样导入它：

import { Document, Page } from "react-pdf/dist/esm/entry.webpack";

现在，我尝试使用以下 webpack 配置来实现 SSR：

// webpack.server.conf

const path = require("path");
const webpackNodeExternals = require("webpack-node-externals");

module.exports = {
  target: "node",
  entry: "./server/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build-server"),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    modules: [path.resolve(__dirname, "src"), "node_modules"],
  },
  externals: [webpackNodeExternals()], // excludes node modules in Webpack
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        options: {
          configFile: "tsconfig.server.json",
        },
      },
      // we …