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

SSR+SPA

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
【デモ】Kiroで体験する仕様駆動開発｜設計からコーディングまでAIと進める開発フロー
Avatar for 工藤皓夢 cmkudo
0
430
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.8k
まずはプロンプトガイドを読もう、話はそれからだ
Avatar for Akira TSURUDA kiakiraki
1
220
言葉の格闘技のススメ～紙とペンと言葉から始める、キャリアの描き方～
Avatar for 進捗ゼミ progresscicada
2
180
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
2
440
typoなんかねぇよ
Avatar for らすぴー raspython3
0
580
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
Avatar for izumin5210 izumin5210
0
380
Hello, Hiroshima Geospatial Data! — Exploring DoboX with Python
Avatar for ぴっかりん ra0kley
0
100
メールのエイリアス機能を履き違えない
Avatar for 船長（せんちょう） isshinfunada
0
260
freeeにおけるEvalsの実践例の紹介
Avatar for freee freee
PRO
0
150
Cloudflare is Agents
Avatar for chimame chimame
0
180
異なる設計思想のフレームワークを経験して得た学び
Avatar for amekuhideki amekuhideki
1
710

Featured

See All Featured
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
450
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
290
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
64
56k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
650
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
630
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
500
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
330
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
470
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
450
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k

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