fix: `ssr` `exportStatic` not handled with `base` #12140

jaykou25 · 2024-02-25T07:15:47Z

修复开启 ssr 后输出产物中的前端路由链接 href 没有正确的 base 前缀的问题. 该问题会影响 SEO 的跳转.

Summary by CodeRabbit

New Features
- Introduced server-side rendering (SSR) and static export capabilities with base URL configuration.
- Added new "about" and "home" pages with navigation links.
Enhancements
- Implemented handling for base URL prefixes in server-side rendered applications to improve routing accuracy.
Documentation
- Updated project documentation to reflect new build and development scripts.

vercel · 2024-02-25T07:15:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
umi	⬜️ Ignored (Inspect)	Visit Preview		Apr 17, 2024 1:14am

packages/renderer-react/src/server.tsx

examples/ssr-export-static-basename/package.json

codecov · 2024-02-26T11:09:28Z

Codecov Report

Attention: Patch coverage is 0% with 4 lines in your changes are missing coverage. Please review.

Project coverage is 28.76%. Comparing base (8d307e8) to head (db2a0d2).
Report is 6 commits behind head on master.

❗ Current head db2a0d2 differs from pull request most recent head bbebea9. Consider uploading reports for the commit bbebea9 to get more accurate results

Files	Patch %	Lines
packages/renderer-react/src/server.tsx	0.00%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #12140      +/-   ##
==========================================
+ Coverage   28.40%   28.76%   +0.35%     
==========================================
  Files         492      489       -3     
  Lines       15171    14972     -199     
  Branches     3630     3563      -67     
==========================================
- Hits         4310     4306       -4     
+ Misses      10088     9900     -188     
+ Partials      773      766       -7

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

jaykou25 · 2024-03-28T01:44:33Z

目前项目是布署在 github.io 的二级目录下, 这种场景应该是挺多的. 现在每次发版前都需要对静态产物中的 a 标签 href 进行手动替换, 还挺麻烦的, 希望能尽快处理一下这个 pr. 感谢! @PeachScript

PeachScript · 2024-03-28T02:15:21Z

packages/renderer-react/src/server.tsx

+
+  // If router has a basename, location should be concatenated with that basename
+  const finalLocation = `${
+    basename.endsWith('/') ? basename.slice(0, -1) : basename


这里可能有问题，getClientRootComponent 会同时用于 ssr 和 ssg，在 ssr 场景下是作为 express middleware 的形态存在的，也就是说在 ssr 场景下这里接收到的 location 来源于 request.url 是包含 basename 的，得抹平一下两个场景下的差异，目前的想法：

getClientRootComponent 接收的 location 是带 basename 的 location

ssg exportStatic 调用预渲染时带上 basename，ref

history 初始化的时候也得处理下 basename，但这个和 href 没啥关系，可以看下要不要在这个 PR 里一起处理掉

还有其他可能的影响吗，调整后存量有 base 的 ssr 或 ssg 项目会被影响吧。

存量项目只要没配 base 都是不受影响的，因为目前就是把 basename 当做 /，如果配了 base，那么：

ssr 存量项目配了 base 的话，产出的 middleware 应该也是用不了的，因为带 base 的 url 匹配不到路由，ref:

umi/packages/server/src/ssr.ts

Line 102 in 60896f5

const matches = matchRoutesForSSR(url, routes);

ssg 存量项目配了 base 目前是存在 HTML 里 href 不正确的问题（虽然 Link 跳转可以正常工作但 SEO 的确有问题），这个改动正是为了修复该问题

fz6m · 2024-03-29T05:17:40Z

可以先把 base 用 define 作为环境变量注入到项目里然后给 href 的地方加上前缀，比如：

// .umirc.ts

  define: { 'process.env.BASE_URL': '/base/' }

  <Link to={`${process.env.BASE_URL}/path/to/url`} />

或者把 Link 组件封装一下统一处理下 url 位置。

PeachScript · 2024-03-29T05:40:31Z

可以先把 base 用 define 作为环境变量注入到项目里然后给 href 的地方加上前缀

这个方案不合适吧，SPA 只需要感知 base 内的路由；如果只是临时解的话还不如写个脚本修正产物 👀

jaykou25 · 2024-03-29T05:45:29Z

可以先把 base 用 define 作为环境变量注入到项目里然后给 href 的地方加上前缀

这个方案不合适吧，SPA 只需要感知 base 内的路由；如果只是临时解的话还不如写个脚本修正产物 👀

同意, 还是得考虑抹平一下两个场景下的差异, 我再修改一下.

fz6m · 2024-03-29T06:43:57Z

如果用脚本去修改产物或者 html ，毕竟是一种外部行为，可能匹配不能精准到每个地方，不够完备。

对于临时解，我感觉还是要从源码出发做调整，如果是只为了 SEO 服务，机器人的请求是已知的（通过 bot 标头判断，主流搜索引擎都有其公开特征，或 CF 的 WAF 规则可以精准知道所有已知的 SEO bot ），可以考虑给 SEO 的请求加一个标识，之后生成不一样的 href 即可。

PeachScript · 2024-03-29T07:02:58Z

不考虑临时解了吧，上面提临时解是相对于 define 来说的，现在 PR 调整好就是彻底解了

coderabbitai · 2024-04-17T01:14:29Z

Walkthrough

The recent updates focus on enhancing server-side rendering (SSR) and static export functionalities in the Umi framework by properly handling the basename property. This adjustment ensures that the base URL prefix is correctly applied to the front-end routing links in the SSR output, addressing a critical issue related to incorrect URL prefixes in pre-rendered pages.

Changes

File Path	Change Summary
`.../ssr-export-static-basename/.umirc.ts`	Introduced SSR and static export configurations, including base URL settings to '/a/'.
`.../ssr-export-static-basename/package.json`	Added Node.js package configurations with dependencies and scripts focusing on Umi.
`.../ssr-export-static-basename/src/pages/...`	Added simple React components for home and about pages with proper routing.
`.../preset-umi/src/features/.../tmpFiles.ts`	Included `basename` in JSON stringification for development environment settings.
`.../preset-umi/templates/server.tpl`	Added dynamic `basename` value to the server template.
`.../renderer-react/src/server.tsx`	Updated `IHtmlProps` interface and routing logic to handle `basename` correctly.
`.../server/src/ssr.ts`	Enhanced `CreateRequestHandlerOptions` and `createJSXGenerator` to include and process `basename`.

Assessment against linked issues

Objective	Addressed	Explanation
Correct `base` prefix in SSR output links [#11233]	✅

Poem

🐰🌟
In the land of code where the Umi trees grow,
A rabbit tweaked the base, now the links rightly show.
With a hop and a commit, the pages align,
Now every URL dances perfectly in line.
Cheers to paths that lead where they should,
In the digital woods, all is now good. 🌲👩‍💻

Recent Review Details

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between a9f494a and bbebea9.

Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !pnpm-lock.yaml

Files selected for processing (8)

examples/ssr-export-static-basename/.umirc.ts (1 hunks)
examples/ssr-export-static-basename/package.json (1 hunks)
examples/ssr-export-static-basename/src/pages/about/index.tsx (1 hunks)
examples/ssr-export-static-basename/src/pages/index.tsx (1 hunks)
packages/preset-umi/src/features/tmpFiles/tmpFiles.ts (1 hunks)
packages/preset-umi/templates/server.tpl (1 hunks)
packages/renderer-react/src/server.tsx (1 hunks)
packages/server/src/ssr.ts (3 hunks)

Files skipped from review due to trivial changes (1)

examples/ssr-export-static-basename/src/pages/about/index.tsx

Additional comments not posted (7)

examples/ssr-export-static-basename/.umirc.ts (1)

1-6: Configuration aligns with the PR's objectives to handle the base prefix correctly.

examples/ssr-export-static-basename/src/pages/index.tsx (1)

1-15: Usage of Umi's Link component demonstrates the intended functionality with the base prefix.

examples/ssr-export-static-basename/package.json (1)

1-13: Project setup and dependencies are correctly configured for the new Umi project.

packages/preset-umi/templates/server.tpl (1)

54-54: Addition of the basename property ensures correct base URL handling in SSR scenarios.

packages/renderer-react/src/server.tsx (1)

17-35: Introduction of the basename property and its handling in getClientRootComponent function correctly addresses the routing issues in SSR and SSG scenarios.

packages/server/src/ssr.ts (1)

79-85: > 📝 NOTE

This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [39-153]

Updates to the CreateRequestHandlerOptions interface and the createJSXGenerator function ensure correct handling of the basename property in server-side rendering contexts.

packages/preset-umi/src/features/tmpFiles/tmpFiles.ts (1)

521-521: Addition of the basename property in the development environment ensures correct base URL handling.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

fz6m reviewed Feb 25, 2024

View reviewed changes

packages/renderer-react/src/server.tsx Outdated Show resolved Hide resolved

fz6m reviewed Feb 25, 2024

View reviewed changes

examples/ssr-export-static-basename/package.json Show resolved Hide resolved

fz6m requested a review from PeachScript February 26, 2024 11:06

PeachScript requested changes Mar 28, 2024

View reviewed changes

jaykou25 added 3 commits April 17, 2024 09:11

fix: ssr exportStatic not handle with base

c77a435

refactor: finalLocation 改成三元判断

06c6ca5

fix: update pnpm-lock.yaml

bbebea9

jaykou25 force-pushed the master branch from db2a0d2 to bbebea9 Compare April 17, 2024 01:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: `ssr` `exportStatic` not handled with `base` #12140

fix: `ssr` `exportStatic` not handled with `base` #12140

jaykou25 commented Feb 25, 2024 •

edited by coderabbitai bot

vercel bot commented Feb 25, 2024 •

edited

codecov bot commented Feb 26, 2024 •

edited

jaykou25 commented Mar 28, 2024

PeachScript Mar 28, 2024

fz6m Mar 29, 2024

PeachScript Mar 29, 2024

fz6m commented Mar 29, 2024

PeachScript commented Mar 29, 2024

jaykou25 commented Mar 29, 2024

fz6m commented Mar 29, 2024

PeachScript commented Mar 29, 2024

coderabbitai bot commented Apr 17, 2024 •

edited

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

fix: ssr exportStatic not handled with base #12140

Are you sure you want to change the base?

fix: ssr exportStatic not handled with base #12140

Conversation

jaykou25 commented Feb 25, 2024 • edited by coderabbitai bot

Summary by CodeRabbit

vercel bot commented Feb 25, 2024 • edited

codecov bot commented Feb 26, 2024 • edited

Codecov Report

jaykou25 commented Mar 28, 2024

PeachScript Mar 28, 2024

Choose a reason for hiding this comment

fz6m Mar 29, 2024

Choose a reason for hiding this comment

PeachScript Mar 29, 2024

Choose a reason for hiding this comment

fz6m commented Mar 29, 2024

PeachScript commented Mar 29, 2024

jaykou25 commented Mar 29, 2024

fz6m commented Mar 29, 2024

PeachScript commented Mar 29, 2024

coderabbitai bot commented Apr 17, 2024 • edited

Walkthrough

Changes

Assessment against linked issues

Poem

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

fix: `ssr` `exportStatic` not handled with `base` #12140

fix: `ssr` `exportStatic` not handled with `base` #12140

jaykou25 commented Feb 25, 2024 •

edited by coderabbitai bot

vercel bot commented Feb 25, 2024 •

edited

codecov bot commented Feb 26, 2024 •

edited

coderabbitai bot commented Apr 17, 2024 •

edited

CodeRabbit Configration File (`.coderabbit.yaml`)