Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ӝࣗѐ 2020֙ 4ਘ Classmethod ੑࢎ ೠҴীࢲ Ӕޖ ۽ ۿূ٘, ࢲߡܻझ ଃী ҙब
Slide 2
Slide 2 text
ݾର - SPAীࢲ SSR - SEO - Rendering - Next.js - Demo - ࢲߡܻझ ߓನ - AWS Amplify - Serverless Framework
Slide 3
Slide 3 text
SPAীࢲ SSRਸ ৵?
Slide 4
Slide 4 text
SEO
Slide 5
Slide 5 text
Googlebot Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19) ୭न JSܳ ਗೞৈࢲ CSRਸ ࢎਊೞח SPAب оמ
Slide 6
Slide 6 text
Google Search Console https://search.google.com/search-console/welcome URL Inspection Toolਸ ࢎਊ೧ࢲ पઁ ੜ زغҊ ח ഛੋ
Slide 7
Slide 7 text
ఋ Ѩ࢝ূ SEO https://searchadvisor.naver.com/guide/seo-advanced-javascript ఋ Ѩ࢝ূٜ ই SPAܳ ৮ ਗೞҊ ח ঋ
Slide 8
Slide 8 text
Ҵղ Ѩ࢝ূ ࠺ਯ https://gs.statcounter.com/search-engine-market-share/all/south-korea http://www.internettrend.co.kr/trendForward.tsp Ҵղীࢲ ݽٚ ࢲ࠺झী ೠ Ѩ࢝ূ ࠺ਯ Ҵղীࢲ Ҵղ ࢲ࠺झী ೠ Ѩ࢝ূ ࠺ਯ
Slide 9
Slide 9 text
Googleীࢲ ֢݅ ਃೞݶ CSRੋ SPAܳ ࢎਊ೧ب оמ ܲ Ѩ࢝ূীࢲ ֢ب Ҋ۰ೠݶ SSRਸ ࢎਊೞৈ SEO ೱ࢚
Slide 10
Slide 10 text
Rendering
Slide 11
Slide 11 text
Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19) ࢚ੋ ۪؊݂ SSR, CSR݅ ࢎਊೞח Ѫ ইפۄ ಕী যܻח ۪؊݂ ਃ
Slide 12
Slide 12 text
۪؊݂ ߹ ର https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Slide 13
Slide 13 text
۪؊݂ ߹ ର https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Slide 14
Slide 14 text
Next.js React ਵ۽ب SSR оמೞ݅ SSR, Hydration, Pre-renderingਸ ખ ؊ औѱೞӝ ਤ೧ Next.jsܳ ࢎਊ
Slide 15
Slide 15 text
Demo
Slide 16
Slide 16 text
AWSীࢲ SPA SSRਸ ࢲߡܻझ۽ যڌѱ?
Slide 17
Slide 17 text
AWS Amplify৬ Serverless Framework
Slide 18
Slide 18 text
যڃ ഋక۽ ߓನ غਸөਃ?
Slide 19
Slide 19 text
ইఃఫ
Slide 20
Slide 20 text
Next.js জ ࢤࢿ ߂ Amplify ࢤࢿ Next.js ۽ં ࢤࢿ Next.js ۽ંী Amplify ୶о npm install aws-amplify @aws-amplify/ui-react ۽ંী was-amplify ୶о
Slide 21
Slide 21 text
API ୶о Amplify cli۽ API ୶о झః݃ ࢿ
Slide 22
Slide 22 text
Amplifyী ݅ٚ APIܳ AWSী ಹए, ࢿೠ झః݃۽ ٘о زࢤࢿ ؽ src/graphql/
Slide 23
Slide 23 text
nextjsaws: component: “@sls-next/
[email protected]
" ࢲߡܻझ ۨਕ۽ ߓನ మ݁ ࢤࢿ serverless.yml ੌ ղਊਸ റ ਤ ٘ ࢿ ߓನ
Slide 24
Slide 24 text
Ѿҗ ഛੋ
Slide 25
Slide 25 text
റ Gtihub Actions ١ਸ ࢎਊೞৈ CI/CD ө ࢸ೧فݶ ݒ рಞ
Slide 26
Slide 26 text
ଵҊ https://youtu.be/k-A2VfuUROg AWS Amplify Next.js ౚషܻ https://docs.amplify.aws/start/getting-started/data-model/q/integration/next#api-with-server-side-rendering-ssr https://tinyurl.com/y43q9rjx
Slide 27
Slide 27 text
хࢎפ