Skip to content

feat(session): make CpSessionPage ClientOnly#188

Merged
mirumodapon merged 3 commits into
mainfrom
clientonly-session-page
Jun 6, 2026
Merged

feat(session): make CpSessionPage ClientOnly#188
mirumodapon merged 3 commits into
mainfrom
clientonly-session-page

Conversation

@pan93412
Copy link
Copy Markdown
Contributor

@pan93412 pan93412 commented Jun 3, 2026

現在 sessions 頁面要渲染的東西太多,導致 SSG 時 nuxt build 偶爾會 OOM: https://github.com/COSCUP/2026/actions/runs/26892693499?pr=176

CleanShot 2026-06-04 at 00 00 43@2x

考慮到 COSCUP 2025 也是把 Session Table 設定成 ClientOnly 的,且現在的 Layout 完全不利於 SEO,故把這個 pattern 移植到 COSCUP 2026 上。

CleanShot.2026-06-05.at.15.21.37.mp4

這樣還有二個額外的好處:

  • 在 M3 Max 上,每個頁面的編譯時間平均減少 1 秒。GitHub Actions 上則是平均減少了 4 秒。
  • 產物大小少了 140MB,單個議程表的 HTML 結構更為乾淨,有利於 SEO。
Before After
CleanShot 2026-06-03 at 23 56 13@2x CleanShot 2026-06-04 at 00 02 03@2x

@pan93412 pan93412 self-assigned this Jun 3, 2026
@pan93412 pan93412 marked this pull request as ready for review June 3, 2026 16:04
@pan93412 pan93412 requested a review from rileychh June 3, 2026 16:51
<template>
<div class="flex flex-col-reverse sm:flex-col">
<CpSessionDaySelectorPlaceholder class="w-screen" />
<CpSessionPlaceholder class="w-[var(--viewport-width,100vw)]" />
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

元件內部已經有 w-full 了,不需要再指定寬度

Suggested change
<CpSessionPlaceholder class="w-[var(--viewport-width,100vw)]" />
<CpSessionPlaceholder />

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

這是因為 w-full 不會扣掉 scroll bar 的寬度,所以之前寫了 --viewport-width 確保 scroll bar 不會蓋到東西

Comment thread app/pages/session.vue Outdated
class="w-screen bottom-0 left-0 sticky z-10 sm:bottom-auto"
:days="days"
/>
<ClientOnly placeholder-tag="div">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<ClientOnly placeholder-tag="div">
<ClientOnly>

Comment thread app/components/feature/CpSessionDaySelectorPlaceholder.vue Outdated
Comment thread app/components/feature/CpSessionPagePlaceholder.vue Outdated
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CpSessionDaySelectorPlacehoderCpSessionPlaceeHolder 拆出去,是有什麼原因嗎

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

其他 PR 會有更多元件,想說要不要模組化
但看起來好像沒有這麼必要

<template>
<div class="flex flex-col-reverse sm:flex-col">
<CpSessionDaySelectorPlaceholder class="w-screen" />
<CpSessionPlaceholder class="w-[var(--viewport-width,100vw)]" />
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

這是因為 w-full 不會扣掉 scroll bar 的寬度,所以之前寫了 --viewport-width 確保 scroll bar 不會蓋到東西

Copy link
Copy Markdown

@mirudapon mirudapon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我想想覺得不太對,session.vue 只會預選染一次應該不會有什麼大問題,最主要是 page/session/[id].vue 每個議程都會重新選染過 session table,而在這些頁面的主要重點都是單一議程本身,背景的 session table 或是 sessionn list 反而沒有那麼重要,在這裡做 client only 應該才是對的

@pan93412
Copy link
Copy Markdown
Contributor Author

pan93412 commented Jun 4, 2026

我想想覺得不太對,session.vue 只會預選染一次應該不會有什麼大問題,最主要是 page/session/[id].vue 每個議程都會重新選染過 session table,而在這些頁面的主要重點都是單一議程本身,背景的 session table 或是 sessionn list 反而沒有那麼重要,在這裡做 client only 應該才是對的

不過 session/[id].vue 的頁面佈局是源自於 session.vue 的 NuxtPage,除了拆成兩個元件外,好像除了重構外,不能很簡單的做到「某個頁面 ClientOnly、某個頁面完整渲染」。

@mirudapon
Copy link
Copy Markdown

我想想覺得不太對,session.vue 只會預選染一次應該不會有什麼大問題,最主要是 page/session/[id].vue 每個議程都會重新選染過 session table,而在這些頁面的主要重點都是單一議程本身,背景的 session table 或是 sessionn list 反而沒有那麼重要,在這裡做 client only 應該才是對的

不過 session/[id].vue 的頁面佈局是源自於 session.vue 的 NuxtPage,除了拆成兩個元件外,好像除了重構外,不能很簡單的做到「某個頁面 ClientOnly、某個頁面完整渲染」。

我在思考如果在 session.vue 裡面做了 client only 在 session/[id].vue 當中源自 NuxtPage 會不會也有 client only 的行為

@mirudapon
Copy link
Copy Markdown

我想想覺得不太對,session.vue 只會預選染一次應該不會有什麼大問題,最主要是 page/session/[id].vue 每個議程都會重新選染過 session table,而在這些頁面的主要重點都是單一議程本身,背景的 session table 或是 sessionn list 反而沒有那麼重要,在這裡做 client only 應該才是對的

不過 session/[id].vue 的頁面佈局是源自於 session.vue 的 NuxtPage,除了拆成兩個元件外,好像除了重構外,不能很簡單的做到「某個頁面 ClientOnly、某個頁面完整渲染」。

我覺得是我誤會了,這樣應該沒什麼問題

@pan93412 pan93412 requested review from mirudapon and rileychh June 5, 2026 07:16
@pan93412
Copy link
Copy Markdown
Contributor Author

pan93412 commented Jun 5, 2026

@mirudapon @rileychh 修好了~

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c81a6a23d6

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread app/pages/session.vue Outdated
Copy link
Copy Markdown
Collaborator

@mirumodapon mirumodapon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mirumodapon mirumodapon merged commit bb0f62b into main Jun 6, 2026
1 check passed
@mirumodapon mirumodapon deleted the clientonly-session-page branch June 6, 2026 06:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants