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

SSR+SPA

Avatar for Sigma Sigma
October 10, 2022
Programming
170
0

 SSR+SPA

Avatar for Sigma

Sigma

October 10, 2022

More Decks by Sigma

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

Other Decks in Programming

See All in Programming
[PyCon KR 2026] More Variants, More Diversity for AI Accelerators
Avatar for Joongi Kim achimnol
0
120
Hono + Inertia + React で LP を構築した話
Avatar for Yuka Ooka oukayuka
2
170
tsc.rip を支える技術 / Kyoto.なんか #8
Avatar for Susisu susisu
0
660
初心者DevRelとして参加者だった私が、DevRel Talks!#2に登壇するまでにしてきたこと
Avatar for Rai sokohirai
0
130
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
340
自動化したのに回らない テスト運用の壁 ―AI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
520
書籍「プロフェッショナルAI駆動開発」紹介スライド
Avatar for Juntaro Matsumoto juntaromatsumoto
0
700
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
Avatar for 村上優稀 musan
2
230
まずはプロンプトガイドを読もう、話はそれからだ
Avatar for Akira TSURUDA kiakiraki
1
220
AWS Transform Custom による Spring Boot 2.xから4.xへのVerUp
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
110
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
5
540
AI Readyの正体はデータマネジメントだ メダリオン2.0の最前線
Avatar for freee freee
PRO
0
400

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
250
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
540
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.3k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
270
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
500
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.6k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
400

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……