Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SSR+SPA

Avatar for Sigma Sigma
October 10, 2022
Programming
0
130

 SSR+SPA

Avatar for Sigma

Sigma

October 10, 2022
Tweet

More Decks by Sigma

See All by Sigma
Proxmox_VE.pdf
Avatar for Sigma seiyasugimoto
0
190
Stable Diffusionで遊んでみた
Avatar for Sigma seiyasugimoto
1
130
EVAフレームワーク
Avatar for Sigma seiyasugimoto
0
100
Nuxtにおける設計
Avatar for Sigma seiyasugimoto
0
88
Atomic Designを ディレクトリ以外で表現
Avatar for Sigma seiyasugimoto
0
79
throttleすげぇぇぇ
Avatar for Sigma seiyasugimoto
0
77
スマホでPythonしたい
Avatar for Sigma seiyasugimoto
0
66
平文で保存するな！
Avatar for Sigma seiyasugimoto
0
87
ソースコードを読もう
Avatar for Sigma seiyasugimoto
0
81

Other Decks in Programming

See All in Programming
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
Avatar for Munetoshi Ishikawa munetoshi
0
160
Hypervel - A Coroutine Framework for Laravel Artisans
Avatar for Albert Chen albertcht
1
110
AIともっと楽するE2Eテスト
Avatar for Yohei Maeda myohei
3
950
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
Avatar for Kentaro Yoshida y_ken
0
350
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
4
6.7k
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
2
630
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
3
760
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
Avatar for hideki kinjyo o0h
PRO
1
250
#QiitaBash MCPのセキュリティ
Avatar for Tommy(sigma) ryosukedtomita
1
1k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
Avatar for Shintani Teppei euglena1215
1
150
A full stack side project webapp all in Kotlin (KotlinConf 2025)
Avatar for Dan Kim dankim
0
110
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
21
3.9k

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
189
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k

Transcript

  1. SSR+SPA Nuxt+Vuex

  2. SSR(+SPA) とは • SSR とは ◦ サーバーサイドレンダリングの略。 クライアントサイド（SPA）と サーバーサイ ドの

    HTMLレンダリングを 併用しユーザー体験を向 上させることを指す。

  3. 冷静に考えるととんでもないことをやってる • サービス内の別のページからリンクすると クライアントサイドで レンダリングされる。 • そのページをF5を押して再読み込みすると サーバーサイドでレ ンダリングされる …

    は？

  4. なんでそんなクソ面倒くさいことを？ • サーバーサイドでレンダリングするならテンプレートエンジンを使った昔ながらの 方法でやれば良いじゃない。 • SPAが必要なほど複雑なフロントエンドで、OGPのクローラの面倒を見たりSNS でシェアされた際のファーストビューの速さが問題になる要件そうそう無いで しょ。 つい先日あった

  5. Nuxtで対応 • NuxtにはSSRサポートがある これで勝つる わけなかった

  6. 案件当時の標準的なNuxtプロジェクト • Nuxt + TypeScript を実現するために外部ライブラリを使う ◦ nuxt-property-decorator ( vue-property-decorator

    ) ◦ vuex-module-decorator • vuex-module-decorator の issue にとんでもないコメントを見つけてしまう。 ◦ https://github.com/championswimmer/vuex-module-decorators/issues/146#issuecomm ent-515269904

  7. SSRのバグのソリューションを探った 結果、getModule() に根深い問題が ありそう。 このリポジトリは大規 模なオーバーホール 無しではSSRでは使 えない。

  8. 終わった……

  9. None

  10. Readmeに書いてある おまじないの意味を知る

  11. exportしてるpluginsがキモ getModule()しているのがポイント

  12. I GOT KOTONAKI……