标签: server-side-rendering

有人有使用Nextjs和模块联合来创建可部署的MFE的经验吗？

我可以看到存在一些限制，在这种情况下我们将失去SSR，例如使用模块联合和 nextjs 部署微前端，或者我们必须使用不是免费的nextjs-mf 。

最近是否有其他方法来实现它，以便我们可以将其部署到生产环境而不受这些限制？

我有一个使用ReactJS构建的响应式Web应用程序,我希望有一天能够支持服务器端呈现.

根据视口大小,应用程序布局/行为会发生变化.但所有这些变化不仅可以通过简单的CSS mediaquery来完成:JS行为,而且底层HTML结构也必须根据宽度进行更改.

例如,我可以:

宽度在800px以下:

<div class="app">
  <div class="menu-mobile">...</div>
  <div class="content">...</div>
  <div class="mobile-left-menu">...</div>
  <div class="footer-mobile">...</div>
</div>

宽度超过800像素:

<div class="app">
  <div class="menu">...</div>
  <div class="main">
    <div class="left-menu">...</div>
    <div class="content">...</div>
    <div class="right-menu">...</div>
  </div>
  <div class="footer">...</div>
</div>

现在,我想为该应用程序使用服务器端呈现.但是在服务器上我没有宽度,所以我不知道返回客户端的HTML结构.

请注意,我不是在寻找使用静态默认服务器端断点的解决方案,而是在客户端上更正应用程序.我正在寻找一种解决方案,根据其设备返回给客户端正确的html结构.因此,如果他在浏览器上禁用javascript,它应该可以正常工作.

有人可能会说我可以渲染两者所需的html,并使用普通的CSS媒体查询隐藏/显示所需的部分display: none,但它会使应用程序变得复杂并使其呈现大量未使用的html元素,因为通常用户不太可能移动断点上方/下方(我的意思是如果他有移动设备,桌面的html元素永远不会被使用)

此外,如果我想使用内联样式,它会变得复杂,因为我必须在服务器上呈现这些内联样式以获得正确的宽度.

我看到有些人正在考虑嗅探浏览器UA来估计他们的视口大小.但即使有一些不安全的屏幕尺寸检测,我也不确定我们是否可以知道服务器端的设备屏幕方向.

我可以做任何事来解决这个问题吗？

我正在尝试使用服务器端呈现(SSR)和Typescript来构建堆栈.一切似乎都很好,但我得到了错误:TypeError: Cannot read property 'render' of undefined.这是完整的堆栈跟踪:

TypeError: Cannot read property 'render' of undefined
    at normalizeRender (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6621:19)
    at render (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6840:5)
    at Object.renderToString (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6871:9)
    at /Users/shoun/Documents/repositories/vuejs-ssr-typescript/dist/server.js:16:14
    at Layer.handle [as handle_request] (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/layer.js:95:5)
    at /Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/index.js:281:22
    at param (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/index.js:354:14)
TypeError: Cannot read property 'render' of undefined
    at normalizeRender (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6621:19)
    at render (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6840:5)
    at Object.renderToString (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6871:9)
    at /Users/shoun/Documents/repositories/vuejs-ssr-typescript/dist/server.js:16:14
    at Layer.handle [as handle_request] (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as …

我一直在寻找在启用"服务器端渲染"的服务器上托管Angular 4应用程序大约3个小时.注意 - 我有一台安装了Apache的AWS服务器(Ubuntu).

首先,我已经知道如何托管Angular 4应用程序(没有服务器端渲染).但是我的主要关注点是我想启用我的应用程序 - 服务器端渲染.

在我的本地,我使用npm start命令,它自动提供应用程序(启用服务器端渲染) -http://localhost:4000

我的package.json文件看起来像这样:

...
"scripts": {
    "serve": "ng serve",
    "prestart": "ng build --prod && ngc && webpack",
    "start": "node dist/server.js",
    "build": "ng build"
},
...

这些命令都运行正常.但我很困惑,我应该再次参加比赛

npm start

在生产服务器上,因此它还需要node_modules安装.这对我来说似乎不是正确的方法？

任何人都可以帮助我托管我的应用程序启用"服务器端呈现".

我正在使用 NextJS 开发一个类似电子商务的网站。

我将在页面中获取并显示产品列表/products。单击任何产品后，我将导航到/details/[productId]，然后按如下方式获取这些产品详细信息。

// In /details/[productId].js file

export async function getServerSideProps({params}) {
    const res = await fetch(`https:my-api-url/api/products/${params.productId}`)
    const product = await res.json()
    return {
        props: {
            product
        }
    }
}

问题

直到这一步一切看起来都很好。但我想减少数据库读取次数，因此detail我计划使用在上一页 ( /products) 中获取的数据，其中包含有关产品的信息，而不是在页面中再次获取产品详细信息。因此，我需要一种方法将这些产品对象传递到下一个屏幕/details/[productId]的 getServerSideProps （以实现用于 SEO 目的的 SSR）。

解决方法

我目前拥有的一种解决方案是stringify产品 json 并通过查询参数传递它，然后将其返回到getServerSideProps({params, query}). 但它只是在浏览器中向我的网址发送垃圾邮件，这看起来一点也不好看。

期待

是否有其他方法将数据传递到getServerSideProps函数中，以便它将利用数据在服务器本身中生成整个页面。请指导我克服这个问题。任何帮助，将不胜感激。

提前致谢.. （：

当我将 getServerSideProps 与 next js 一起使用时，页面加载几乎需要 5 或 6 秒。我尝试只使用一个 url 来获取，但次数不多，但页面加载又需要很多时间。

export const getServerSideProps = async (ctx) => {
   let data ;
   try {
      data = axios.get("url")
   } catch(e){
      data = "error"
   }
   return {
     data: data,
   };
 };

我想知道是否有任何技巧可以加快 getServerSideProps 数据获取速度，以便我可以更快地初始页面加载？

Svelte\xe2\x80\x99s JavaScript 服务器端渲染 API 描述如下： https: //svelte.dev/docs#run-time-server-side-component-api

但是，当我在 TypeScript 中执行此操作时，没有方法App.render()。

\n
• 我需要改变吗rollup.config.js（例如compilerOptions.generate）？
\n
• 我是否需要此文件 \xe2\x80\x93 的两个版本，一个用于服务器，一个用于客户端？
\n

有人可以帮忙吗？谢谢！

我正在使用 Remix-run，我想从 auth 实用程序函数重定向到我的登录页面。但它不起作用。这是与我的身份验证实用程序方法类似的功能

import { redirect } from 'remix';

 async function authenticate(request){
  try{
    const user = await rpc.getUser(request);
    return user
  } catch(e){
   console.log(e) // logs error when rpc fails
   if(e.response.status === 401){
    return redirect('/login')
   }
   return redirect('/500')
  }
 }

//component.jsx

import {useLoaderData } from 'remix';

export async function loader({ request }) {
  const user = await auth.authenticate(request);
  return { user };
}

export default function Admin(){
 const { user } = useLoaderData();
  return <h1>{user.name}</h1>
}

如果 auth rpc 失败，我会在日志中收到错误消息。但重定向永远不会发生。如果我将 …

在 Nuxt 2 中，我可以通过利用 Stencil 包中提供的 renderToString() 方法并结合 Nuxt 钩子来使用服务器端渲染的 Stencil 组件，如下所示：

import { renderToString } from '[my-components]/dist-hydrate'

export default function () {
  this.nuxt.hook('generate:page', async (page) => {
    const render = await renderToString(page.html, {
      prettyHtml: false
    })
    page.html = render.html
  })
}

自从Stencil 2.16.0最近发布以来，我能够在由 Vite 提供支持的 Nuxt 3 中使用本机 Web 组件。然而我还没有找到一种方法来连接模板水合过程。不幸的是，还没有关于可组合useHydration()的文档。

有谁知道我如何让它在 Nuxt 3 中工作？

在 Next.js 13.4 上使用 appDir 的文档说明如下：

第 3 步：迁移 next/head

在pages目录中，next/head React组件用于管理标题和元等HTML元素。在应用程序目录中，next/head 被新的内置 SEO 支持替换。

但该next/head组件也能够添加非 SEO 标签。特别是，我想添加<link rel="...">标签。如果元数据机制似乎不支持链接标签（仅支持自定义<meta>标签），如何实现这一目标？

我无法将标签直接添加到根布局，因为有些标签只应该存在于网站主页上。如果布局知道当前路线，我可以有条件地将标签添加到根布局，但它似乎不适用于 SSG。