⚡️ perf: fix SSR hydration to improve first-visit first-page loading #2640
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe recent changes involve adding a new dependency to handle language resolution and modifying the Changes
Assessment against linked issues
Tip New Features and ImprovementsReview SettingsIntroduced new personality profiles for code reviews. Users can now select between "Chill" and "Assertive" review tones to tailor feedback styles according to their preferences. The "Assertive" profile posts more comments and nitpicks the code more aggressively, while the "Chill" profile is more relaxed and posts fewer comments. AST-based InstructionsCodeRabbit offers customizing reviews based on the Abstract Syntax Tree (AST) pattern matching. Read more about AST-based instructions in the documentation. Community-driven AST-based RulesWe are kicking off a community-driven initiative to create and share AST-based rules. Users can now contribute their AST-based rules to detect security vulnerabilities, code smells, and anti-patterns. Please see the ast-grep-essentials repository for more information. New Static Analysis ToolsWe are continually expanding our support for static analysis tools. We have added support for Tone SettingsUsers can now customize CodeRabbit to review code in the style of their favorite characters or personalities. Here are some of our favorite examples:
Revamped Settings PageWe have redesigned the settings page for a more intuitive layout, enabling users to find and adjust settings quickly. This change was long overdue; it not only improves the user experience but also allows our development team to add more settings in the future with ease. Going forward, the changes to Miscellaneous
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Additionally, you can add CodeRabbit Configration File (
|
|
👍 @arvinxx Thank you for raising your pull request and contributing to our Community |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #2640 +/- ##
=======================================
Coverage 93.68% 93.68%
=======================================
Files 349 349
Lines 20408 20408
Branches 1574 1576 +2
=======================================
Hits 19119 19119
Misses 1289 1289 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (1)
src/layout/GlobalProvider/index.tsx (1)
Line range hint
56-79: The use ofanytype fordefaultNeutralColoranddefaultPrimaryColorshould be replaced with more specific types to enhance type safety.- defaultNeutralColor={neutralColor?.value as any} - defaultPrimaryColor={primaryColor?.value as any} + defaultNeutralColor={neutralColor?.value as string} // Assuming the type is string, adjust as necessary + defaultPrimaryColor={primaryColor?.value as string} // Assuming the type is string, adjust as necessary
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- package.json (1 hunks)
- src/layout/GlobalProvider/index.tsx (4 hunks)
Files skipped from review due to trivial changes (1)
- package.json
Additional Context Used
Biome (3)
src/layout/GlobalProvider/index.tsx (3)
82-82: Unexpected any. Specify a different type.
83-83: Unexpected any. Specify a different type.
2-3: All these imports are only used as types.
| import { cookies, headers } from 'next/headers'; | ||
| import { FC, PropsWithChildren } from 'react'; |
There was a problem hiding this comment.
Consider using TypeScript's type-only import to prevent runtime imports where only types are needed.
- import { cookies, headers } from 'next/headers';
- import { FC, PropsWithChildren } from 'react';
+ import type { cookies, headers } from 'next/headers';
+ import type { FC, PropsWithChildren } from 'react';Committable suggestion was skipped due low confidence.
| const parserFallbackLang = () => { | ||
| /** | ||
| * The arguments are as follows: | ||
| * | ||
| * 1) The HTTP accept-language header. | ||
| * 2) The available locales (they must contain the default locale). | ||
| * 3) The default locale. | ||
| */ | ||
| let fallbackLang: string = resolveAcceptLanguage( | ||
| headers().get('accept-language') || '', | ||
| // Invalid locale identifier 'ar'. A valid locale should follow the BCP 47 'language-country' format. | ||
| locales.map((locale) => (locale === 'ar' ? 'ar-EG' : locale)), | ||
| 'en-US', | ||
| ); | ||
| // if match the ar-EG then fallback to ar | ||
| if (fallbackLang === 'ar-EG') fallbackLang = 'ar'; | ||
|
|
||
| return fallbackLang; | ||
| }; |
There was a problem hiding this comment.
Ensure the hardcoded locale fix ('ar-EG' to 'ar') is scalable. Consider using a mapping object for such exceptions to facilitate easier updates and maintenance.
+ const localeExceptions = { 'ar-EG': 'ar' };
- if (fallbackLang === 'ar-EG') fallbackLang = 'ar';
+ if (localeExceptions[fallbackLang]) fallbackLang = localeExceptions[fallbackLang];Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| const parserFallbackLang = () => { | |
| /** | |
| * The arguments are as follows: | |
| * | |
| * 1) The HTTP accept-language header. | |
| * 2) The available locales (they must contain the default locale). | |
| * 3) The default locale. | |
| */ | |
| let fallbackLang: string = resolveAcceptLanguage( | |
| headers().get('accept-language') || '', | |
| // Invalid locale identifier 'ar'. A valid locale should follow the BCP 47 'language-country' format. | |
| locales.map((locale) => (locale === 'ar' ? 'ar-EG' : locale)), | |
| 'en-US', | |
| ); | |
| // if match the ar-EG then fallback to ar | |
| if (fallbackLang === 'ar-EG') fallbackLang = 'ar'; | |
| return fallbackLang; | |
| }; | |
| const parserFallbackLang = () => { | |
| /** | |
| * The arguments are as follows: | |
| * | |
| * 1) The HTTP accept-language header. | |
| * 2) The available locales (they must contain the default locale). | |
| * 3) The default locale. | |
| */ | |
| let fallbackLang: string = resolveAcceptLanguage( | |
| headers().get('accept-language') || '', | |
| // Invalid locale identifier 'ar'. A valid locale should follow the BCP 47 'language-country' format. | |
| locales.map((locale) => (locale === 'ar' ? 'ar-EG' : locale)), | |
| 'en-US', | |
| ); | |
| const localeExceptions = { 'ar-EG': 'ar' }; | |
| // if match the ar-EG then fallback to ar | |
| if (localeExceptions[fallbackLang]) fallbackLang = localeExceptions[fallbackLang]; | |
| return fallbackLang; | |
| }; |
arvinxx
changed the title
arvinxx
changed the title
|
❤️ Great PR @arvinxx ❤️ The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world. |
|
🎉 This PR is included in version 0.161.13 🎉 The release is available on: Your semantic-release bot 📦🚀 |
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
close #2572
close #2516
📝 补充信息 | Additional Information
在 #253 中，我们基于 Cookie 实现了用户浏览器自适应语种的 SSR 方案。
当时存在一个问题是：用户第一次打开时是没有 cookie 的，这就会导致 fallback 到 en-US，而中文用户的浏览器（client端）又是 zh-CN ，这就会出现 SSR 水合不匹配问题。
利用
next@14.2.x的 dev 报错可以看得非常清楚：当 React SSR 水合出错时，界面会一直维持在骨架屏上，必须要用户做一次鼠标点击的操作，才能触发 client fallback 渲染。
在之前看来，在第二次及以后都不会出现这个问题，只有首次会遇到，而且是必须什么也不做才会碰到，这个场景感觉不算很多，因此暂时选择了搁置。
但也是因此，很多用户认为是加载资源多导致感觉加载慢的问题。（譬如 #2516 (comment) 的反馈）
本 PR 通过读取 header 中的
accept-language字段，针对没有 cookie 的场景，补充 fallback 语种。这样一来，理论上就能解决大部分用户的首次访问的首屏水合问题。