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

SSR+SPA

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Sigma Sigma
October 10, 2022
Programming
150
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
220
Stable Diffusionで遊んでみた
Avatar for Sigma seiyasugimoto
1
140
EVAフレームワーク
Avatar for Sigma seiyasugimoto
0
110
Nuxtにおける設計
Avatar for Sigma seiyasugimoto
0
100
Atomic Designを ディレクトリ以外で表現
Avatar for Sigma seiyasugimoto
0
89
throttleすげぇぇぇ
Avatar for Sigma seiyasugimoto
0
85
スマホでPythonしたい
Avatar for Sigma seiyasugimoto
0
74
平文で保存するな！
Avatar for Sigma seiyasugimoto
0
95
ソースコードを読もう
Avatar for Sigma seiyasugimoto
0
97

Other Decks in Programming

See All in Programming
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
370
Talking to terminals (and how they talk back) (KotlinConf 2026)
Avatar for Jake Wharton jakewharton
PRO
1
120
CSC307 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
7
1.9k
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
160
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
200
UaaL×Androidアプリのメモリ計測 — Memory Profilerの先へ
Avatar for Ryosuke Shimizu (RIO) rio432
0
180
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
590
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
3
1.7k
iOS26時代の新規アプリ開発
Avatar for 野瀬田　裕樹 yuukiw00w
0
200
inferと仲良くなる10分間
Avatar for ryokatsuse ryokatsuse
1
250
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
0
350

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
65
54k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
760
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
270
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
160
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
160
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
800
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
360

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