[fix] repair Open Library borrowing page rendering

[dethan3]

Preserve translation resolver functions across SSR serialization and render paragraph Markdown inline to prevent runtime and hydration errors.

Checklist（清单）:

• Labels
• Assignees
• Reviewers

Closes

Summary by CodeRabbit

• 新功能

  • 支持在服务端传递并恢复序列化的语言数据，提升国际化内容加载能力。
  • 图书详情页现从后端获取图书信息，展示最新数据。

• 错误修复

  • 当请求的图书不存在时，继续正确显示未找到页面。

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes

SSR 国际化数据序列化

Layer / File(s)	Summary
SSR 国际化数据序列化 models/Translation.ts	loadSSRLanguage 异步加载并编码语言映射；createI18nStore 接收序列化字符串并解码为翻译映射。

远程图书详情加载

Layer / File(s)	Summary
图书详情接口加载 pages/open-library/book/[id].tsx	详情页通过 larkClient 请求图书列表并按路由 id 查找图书，未找到时返回 notFound。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant NextSSR
  participant loadSSRLanguage
  participant loadLanguageMapFrom
  participant createI18nStore
  NextSSR->>loadSSRLanguage: 请求 SSR 语言数据
  loadSSRLanguage->>loadLanguageMapFrom: 异步加载语言映射
  loadLanguageMapFrom-->>loadSSRLanguage: 返回语言映射
  loadSSRLanguage-->>NextSSR: 返回序列化 languageMap
  NextSSR->>createI18nStore: 传入 serializedData
  createI18nStore->>createI18nStore: 使用 decodeFunctions 解析数据

Loading

Possibly related PRs

• Open-Source-Bazaar/Open-Source-Bazaar.github.io#20：同样修改了 Open Library 图书详情页的 getServerSideProps 数据加载逻辑。

Suggested reviewers: techquery

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题与变更一致，概括了 Open Library 借阅页的渲染修复。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/borrow-page-hydration

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

pages/open-library/book/[id].tsx (1)

19-24: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

优化类型转换并避免潜在的 SSR 性能反模式

针对这段数据获取代码，建议进行以下优化以符合现代 TypeScript 规范并保障服务端性能：

1. 类型转换与可选链：+(params!.id + '') 的写法较为晦涩，建议使用更符合现代 ECMAScript 规范的 Number(params?.id)；同时对于接口响应的 body 推荐使用可选链 body?.find，以替代非空断言 !，避免因网络或解构异常导致的运行时崩溃。
2. Pages Router 数据获取正确性：在 getServerSideProps 中直接请求自身的 API 路由（即 ${API_Host}/api/...）是 Next.js 官方明确指出的性能反模式，这会在同服务器内增加额外的 HTTP 往返开销。如果这是当前项目的内部路由，建议直接提取并复用底层的获取逻辑；如果此处仅是作为后端真实接口上线前的临时 Mock，则可忽略此架构提示。

💡 推荐的重构代码

-  const bookId = +(params!.id + '');
-
-  const { body } = await larkClient.get<Book[]>(`${API_Host}/api/open-library/books`);
-
-  const book = body!.find(({ id }) => id === bookId);
+  const bookId = Number(params?.id);
+
+  const { body } = await larkClient.get<Book[]>(`${API_Host}/api/open-library/books`);
+
+  const book = body?.find(({ id }) => id === bookId);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@pages/open-library/book/`[id].tsx around lines 19 - 24, 更新 getServerSideProps
中的类型转换，使用 Number(params?.id) 替代当前的字符串拼接与非空断言；将 body!.find 改为通过可选链安全查找。若该接口是项目内部
API，提取并复用底层数据获取逻辑，避免 SSR 通过 HTTP 请求自身的 API 路由；若是临时 Mock，则保留现有请求方式。

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@pages/open-library/book/`[id].tsx:
- Around line 19-24: 更新 getServerSideProps 中的类型转换，使用 Number(params?.id)
替代当前的字符串拼接与非空断言；将 body!.find 改为通过可选链安全查找。若该接口是项目内部 API，提取并复用底层数据获取逻辑，避免 SSR 通过
HTTP 请求自身的 API 路由；若是临时 Mock，则保留现有请求方式。

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4009c373-4fe6-4b52-9516-c866748e46c6

📥 Commits

Reviewing files that changed from the base of the PR and between 5a63443 and 407ab24.

📒 Files selected for processing (2)

• models/Translation.ts
• pages/open-library/book/[id].tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• models/Translation.ts