标签: server-side-rendering

在 nextjs 中“禁用”SSR

我想创建一个没有 SSR、带有 React 和 MUI 的浏览器应用程序。所以我在这里找到了一个 NextJS-Template:

https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript

我想完全禁用 SSR,假设在最好的情况下从 _document.tsx 开始,但至少文件 _app.tsx 和所有后续内容(例如 _index.tsx)应该在没有 SSR 的情况下呈现。

那么,如何“完全”禁用SSR呢?

server-side-rendering next.js

4
推荐指数
1
解决办法
7656
查看次数

在 Nextjs 中使用 useEffect 随机化数组

我想在每次加载页面时随机化一个数组。我正在使用 Nextjs,第一个问题是客户端和服务器不匹配,所以有人建议我需要将随机代码放入 useEffect 挂钩中,但我显然做错了。 ..我需要一些帮助来了解如何修复我的代码。

\n
export default function IndexPage() {\n  useEffect(()=>{\n    let randomizeArray = [...array].sort(() => 0.5 - Math.random());\n\n    let selectedRandomArray = randomizeArray.slice(0, 3);\n  },[])\n\n  return (\n    <div>\n      {selectedRandomArray.map((s, id) => (\n        <div key={id}>\n          <h2>{s.name}</h2>\n        </div>\n      ))}\n    </div>\n  );\n}\n
Run Code Online (Sandbox Code Playgroud)\n

这是 Codesandbox 中没有 useEffect 的示例。它有效,但我\xc2\xb4m在控制台中得到不匹配的客户端/服务器\n https://codesandbox.io/s/shuffle-array-and-return-random-values-in-nextjs-veqy3w?file=/pages/索引.js

\n

random reactjs server-side-rendering next.js use-effect

4
推荐指数
1
解决办法
1196
查看次数

Next.js 能否为 SSR 页面返回 304 Not Modified 状态?

很明显,Next.js 对 SSG 页面返回 304 Not Modified HTTP 状态,但它可以对实时渲染的页面执行此操作吗?

反过来说,当最初请求 SSR 页面时,Next.js 是否返回 ETag 标头?

谢谢。

reactjs server-side-rendering next.js

4
推荐指数
1
解决办法
5868
查看次数

Strapi - SSR 上的 Axios 请求失败并显示“connect ECONNREFUSED”,但 CSR 运行良好

仅在 SSR期间,SSR 期间对 Strapi 的请求因未知原因而失败。SSR 请求到达 Strapi 端点,我可以看到即将返回的数据。但发生了一些事情,请求失败了。

err :>>  AxiosError: connect ECONNREFUSED ::1:1337
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1161:16) {
  port: 1337,
  address: '::1',
  syscall: 'connect',
  code: 'ECONNREFUSED',
  errno: -4078,
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [Function: httpAdapter],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function] },
    validateStatus: [Function: validateStatus],
    headers: {
      Accept: 'application/json, text/plain, */*',
      'User-Agent': …
Run Code Online (Sandbox Code Playgroud)

server-side-rendering strapi sveltekit

4
推荐指数
1
解决办法
872
查看次数

在 Nuxt 3 中使用 swr 时如何更改 TTL?(最好按路线)

Nuxt 3 文档说swr enables a static build, that lasts for a configurable TTL,但是,我无法找到如何更改 TTL 以及是否可以按路由设置它。那可能吗?如果是这样,怎么办?

\n

我查看了 github &\xc2\xa0 也尝试在 Vite / Nitro 文档中找到它,但没有找到任何东西。

\n

我在 Nitro 配置源文件中找到了有关图像 TTL 的内容,但我想这不是我想要的。

\n

javascript ttl server-side-rendering nuxt.js nuxtjs3

4
推荐指数
1
解决办法
1762
查看次数

你把_app.js放在app目录的哪里

next-auth(版本 4)的文档表明我们需要将服务提供者放入:

pages/_app.js
Run Code Online (Sandbox Code Playgroud)

我正在关注以下示例: https: //next-auth.js.org/getting-started/example

如果我使用实验性应用程序目录而不是 nextjs 13 中的页面目录,我们应该将 _app.js 文件放在哪里?

authentication server-side-rendering next.js next-auth next.js13

4
推荐指数
1
解决办法
1673
查看次数

如何使用 Remix 仅渲染组件客户端?

我有一个只能在客户端呈现的 Three.js 组件,如何使用 Remix 来实现这一点?Remix 是否公开任何实用程序来帮助确定我们处于服务器还是客户端上下文中?找不到任何东西。

这是我尝试使用混音中不存在的虚构挂钩进行操作的示例。

import React from 'react';
import { useRemixContext } from '@remix-run/react';

const MyComponent = () => {
  const remixContext = useRemixContext();
  if(remixContext.server) {
     return null;
  }
  return <div>Should only be rendered on the client</div>
}
Run Code Online (Sandbox Code Playgroud)

node.js reactjs server-side-rendering remix.run

4
推荐指数
2
解决办法
1万
查看次数

如何在 Next.js 14 App Router 中进行正确的 SSR 和数据获取?

由于其高级功能,我最近从页面路由器过渡到应用程序路由器。然而,我遇到了一个困境,对SSR的实现和数据获取感到困惑。

问题:

文档建议,我们可以使用旧的 fetch 函数以及诸如“{cache: 'no-store'}”之类的附加参数来简单地获取数据,而不是使用 getServerSideProps() 或类似的方法。但是,我不确定如何创建一个通用辅助函数来获取可在所有页面上使用的 GraphQL 数据。

混乱:

Next.js 建议不要在组件内使用钩子,因为组件默认是 SSR。要利用挂钩,建议在组件中包含“使用客户端”。但是,如果我们的目标是以 SSR 的方式获取数据,然后将其存储在钩子中,那么由于在组件内使用了“use client”,获取的数据是否仍然保持其 SSR 特性?

如果您编写一个函数来以 SSR 的形式获取数据以及存储数据的钩子,那就更好了。非常感谢您的帮助。先感谢您。

这是我在上一页路由器的应用程序中使用的辅助函数。

<pre>
export async function storefront(params) {
    const response = await  fetch(process.env.NEXT_PUBLIC_API_URL, { 
       method: "POST",
       headers: {
       "Content-Type": "application/json",
       "Another-Property": "Something here", },
       body: JSON.stringify({ params }),
     });
    return response.json();
   }
</pre>
Run Code Online (Sandbox Code Playgroud)

reactjs server-side-rendering app-router next.js next.js13

4
推荐指数
1
解决办法
5047
查看次数

如何使用Laravel + React.js + Redux进行服务器端渲染?

我们在后端使用Laravel和在前端使用React.JS + Redux设置应用程序.所以寻找服务器端渲染(用于SEO)的解决方案.

找到这个解决方案:https://github.com/tz5514/Laravel-Redux-Isomorphic但它似乎在后端使用express.js进行渲染.

所以我正在寻找更好的服务器端渲染解决方案.

laravel reactjs server-side-rendering

3
推荐指数
2
解决办法
6887
查看次数

将Angular 4 Web应用程序转换为Angular Universal应用程序

我需要将Angular 4 Web应用程序转换为Angular Universal.原因是目前,Web应用程序无法被Google(以及Facebook社交预览缩略图)正确编入索引,因为它是单页应用程序并在客户端.所以现在我需要实现Angular Universal,服务器端渲染.

我了解了如何使用这个精彩的视频系列创建一个新的Angular Universal应用程序.

问题:您能否告诉我我必须遵循将现有应用转换为Angular Universal的方向.可能是一个不错的URL或步骤或任何方向将受到高度赞赏.

注意:这里角度版本不是问题.2或者是.或者4.

server-side-rendering angular-universal angular

3
推荐指数
1
解决办法
2856
查看次数