Nitro v3

Transcript

1. Nitro v3 Vue Fes Japan 2025 After Talk 2025/11/11 @kazupon
2. ࣗݾ঺հ
3. Vue Fes Japan Organizer Vue.js Japan User Group Organizer Vue.js Core Team Nuxt Ecosystem Team Vue I18n, Intlify and Gunshi author Plaid, inc. @kazu_pon kazupon kazupon
4. ͸͡Ίʹ
5. Vue Fes Japan 2025 • Έͳ͞Μָ͠Ί·͔ͨ͠ʁ
6. Vue Fes Japan 2026 • དྷ೥ʹ޲͚ͯ४උ͕࢝·͍ͬͯΔͷͰɺίΞελο ϑ͓଴͓ͪͯ͠Γ·͢ʔ
7. Vue Fes Japan 2025 ։࠵લʹ…
8. ViteConf 2025 • Evan ࢯͷΩʔϊʔτͷଞɺ֤ίϛϡχςΟʹΑΔηογϣϯ͕୔ࢁ͋ͬͨ https://www.youtube.com/watch?v=x7Jsmt_o9ek
9. PooyaࢯʹΑΔNitroͷηογϣϯ΋ https://www.youtube.com/watch?v=189wogO3aCE
10. ࠓ೔࿩͢͜ͱ Nitro v3 ͷ঺հ
11. ຊ୊ʹೖΔલʹ
12. Nitro ʹ͍ͭͯ ؆୯ʹ ͓͞Β͍
13. Nitroͱ͸ • WebαʔόʔΛ࡞ΔͨΊͷπʔϧΩοτ • UnJSΛϕʔεʹ࡞ΒΕ͍ͯΔͨΊͲͷ JS Runtime Ͱ΋ಈ͖ɺͲΜͳ৔ॴ Ͱ΋ಈ͘ • ҆ఆ൛ϝδϟʔόʔδϣϯ͸ v2 • ύοέʔδ໊: Nitropack
14. Nitroͷಛ௃
15. • Web ϑϩϯτΤϯυͷϝλϑϨʔϜϫʔΫ Nitroͷࣄྫ Nitro Nuxt Solid Start Analog TanStack Start
16. Nitro v3
17. • Nitro v3 ͸ݱ࣌఺Ͱ·ͩ alpah όʔδϣϯ • ਖ਼ࣜϦϦʔε·Ͱʹ࢓༷͕มΘΔՄೳੑ͕͋Γ·͢ ஫ҙ
18. Nitro v3 ͸Ͳ͏ͳΔͷ͔ • NPMొ࿥ύοέʔδ໊ nitropack ͔Β nitro ʹมߋ • Request/Response ͸σϑΥϧτ Web Standard ʹ • αʔόʔΤϯτϦͷఏڙ • ͞ΒʹϋΠύϑΥʔϚϯεԽ • Ϩϯμϥͷఏڙ • Vite ϓϥάΠϯͷఏڙ
19. Request /Resonse ͸σϑΥϧτWeb Standard ʹ • Nitro v2 : H3 v1 (Node APIϕʔε) • Nitro v3 : H3 v2 (Web Standard API ϕʔε) https://h3.dev/migration#web-standards
20. αʔόΤϯτϦͷఏڙ • άϩʔόϧϛυϧ΢ΣΞͱͯ͠ػೳ͢ΔಛผͳϋϯυϥΛఏڙ͢Δ • ΋ͪΖΜɺWeb Standards ʹ४ڌʂ
21. αʔόΤϯτϦͷఏڙ • H3 ͚ͩͰͳ͘ Hono ΍ Elysia ͱ͍ͬͨଞͷWebϑϨʔϜϫʔΫ͕ಈ͍ ͪΌ͏
22. ͞ΒʹϋΠύϑΥʔϚϯεԽ • Dependencies (ґଘ node_modules) ͕ݮͬͨ nitropack@2.12.9 @cloud2are/kv-asset-handler@0.4.0 @rollup/plugin-alias@5.1.1 @rollup/plugin-commonjs@28.0.9 @rollup/plugin-inject@5.0.5 @rollup/plugin-json@6.1.0 @rollup/plugin-node-resolve@16.0.3 @rollup/plugin-replace@6.0.3 @rollup/plugin-terser@0.4.4 @vercel/nft@0.30.3 archiver@7.0.1 c12@3.3.1 chokidar@4.0.3 citty@0.1.6 compatx@0.2.0 confbox@0.2.2 cookie-es@2.0.0 croner@9.1.0 crossws@0.3.5 db0@0.3.4 defu@6.1.4 destr@2.0.5 dot-prop@10.1.0 esbuild@0.25.12 escape-string-regexp@5.0.0 etag@1.8.1 exsolve@1.0.7 globby@15.0.0 gzip-size@7.0.0 hookable@5.5.3 httpxy@0.1.7 ioredis@5.8.2 jiti@2.6.1 klona@2.0.6 knitwork@1.2.0 listhen@1.9.0 magicast@0.5.1 mime@4.1.0 mlly@1.8.0 node-fetch-native@1.6.7 ofetch@1.5.1 ohash@2.0.11 perfect-debounce@2.0.0 pkg-types@2.3.0 pretty-bytes@7.1.0 radix3@1.1.2 rollup-plugin-visualizer@6.0.5 rollup@4.53.1 scule@1.3.0 semver@7.7.3 serve-placeholder@2.0.2 serve-static@2.2.0 ultrahtml@1.6.0 uncrypto@0.1.3 unctx@2.4.1 unenv@2.0.0-rc.24 unimport@5.5.0 unstorage@1.17.2 untyped@2.0.0 unwasm@0.3.11 youch-core@0.3.3 youch@4.1.0-beta.12 consola@3.4.2 h3@1.15.4 magic-string@0.30.21 source-map@0.7.6 std-env@3.10.0 ufo@1.6.1 unplugin-utils@0.3.1 node-mock-http@1.0.3 pathe@2.0.3 mime@3.0.0 @rollup/pluginutils@5.3.0 commondir@1.0.1 estree-walker@2.0.2 fdir@6.5.0 is-reference@1.2.1 picomatch@4.0.3 @types/resolve@1.20.2 deepmerge@4.3.1 is-module@1.0.0 resolve@1.22.11 serialize-javascript@6.0.2 smob@1.5.0 terser@5.44.1 @mapbox/node-pre-gyp@2.0.0 acorn-import-attributes@1.9.5 acorn@8.15.0 async-sema@3.1.1 bindings@1.5.0 glob@10.4.5 node-gyp-build@4.8.4 resolve-from@5.0.0 graceful-fs@4.2.11 async@3.2.6 buffer-crc32@1.0.0 readable-stream@4.7.0 readdir-glob@1.1.3 tar-stream@3.1.7 zip-stream@6.0.1 archiver-utils@5.0.2 dotenv@17.2.3 giget@2.0.0 rc9@2.1.2 readdirp@4.1.2 type-fest@5.2.0 @sindresorhus/merge-streams@4.0.0 fast-glob@3.3.3 ignore@7.0.5 path-type@6.0.0 slash@5.1.0 unicorn-magic@0.3.0 duplexer@0.1.2 @ioredis/commands@1.4.0 cluster-key-slot@1.1.2 denque@2.1.0 lodash.defaults@4.2.0 lodash.isarguments@3.1.0 redis-errors@1.2.0 redis-parser@3.0.0 standard-as-callback@2.1.0 debug@4.4.3 @parcel/watcher-wasm@2.5.1 @parcel/watcher@2.5.1 clipboardy@4.0.0 get-port-please@3.2.0 http-shutdown@1.2.2 node-forge@1.3.1 pathe@1.1.2 untun@0.1.3 uqr@0.1.2 @babel/parser@7.28.5 @babel/types@7.28.5 source-map-js@1.2.1 pkg-types@1.3.1 open@8.4.2 yargs@17.7.2 @types/estree@1.0.8 encodeurl@2.0.0 escape-html@1.0.3 parseurl@1.3.3 send@1.2.0 estree-walker@3.0.3 unplugin@2.3.10 local-pkg@1.1.2 strip-literal@3.1.0 tinyglobby@0.2.15 anymatch@3.1.3 lru-cache@10.4.3 @poppinss/exception@1.2.2 error-stack-parser-es@1.0.5 @poppinss/colors@4.1.5 @poppinss/dumper@0.6.5 @speed-highlight/core@1.2.12 @babel/helper-string-parser@7.27.1 @babel/helper-validator-identiJer@7.28.5 detect-libc@2.1.2 https-proxy-agent@7.0.6 node-fetch@2.7.0 nopt@8.1.0 tar@7.5.2 is-glob@4.0.3 micromatch@4.0.8 napi-wasm@1.1.3 detect-libc@1.0.3 node-addon-api@7.1.1 kleur@4.1.5 @sindresorhus/is@7.1.1 supports-color@10.2.2 picomatch@2.3.1 normalize-path@3.0.0 Jle-uri-to-path@1.0.0 execa@8.0.1 is-wsl@3.1.0 is64bit@2.0.0 @nodelib/fs.stat@2.0.5 @nodelib/fs.walk@1.2.8 glob-parent@5.1.2 merge2@1.4.1 nypm@0.6.2 foreground-child@3.3.1 jackspeak@3.4.3 minimatch@9.0.5 minipass@7.1.2 package-json-from-dist@1.0.1 path-scurry@1.11.1 cookie-es@1.2.2 iron-webcrypto@1.2.1 quansync@0.2.11 @jridgewell/sourcemap-codec@1.5.5 deJne-lazy-prop@2.0.0 is-docker@2.2.1 is-wsl@2.2.0 confbox@0.1.8 abort-controller@3.0.0 buffer@6.0.3 events@3.3.0 process@0.11.10 string_decoder@1.3.0 minimatch@5.1.6 is-core-module@2.16.1 path-parse@1.0.7 supports-preserve-symlinks-2ag@1.0.0 fresh@2.0.0 http-errors@2.0.0 mime-types@3.0.1 ms@2.1.3 on-Jnished@2.4.1 range-parser@1.2.1 statuses@2.0.2 randombytes@2.1.0 js-tokens@9.0.1 b4a@1.7.3 fast-Jfo@1.3.2 streamx@2.23.0 @jridgewell/source-map@0.3.11 commander@2.20.3 source-map-support@0.5.21 tagged-tag@1.0.0 @jridgewell/remapping@2.3.5 webpack-virtual-modules@0.6.2 cliui@8.0.1 escalade@3.2.0 get-caller-Jle@2.0.5 require-directory@2.1.1 string-width@4.2.3 y18n@5.0.8 yargs-parser@21.1.1 compress-commons@6.0.2 @jridgewell/gen-mapping@0.3.13 @jridgewell/trace-mapping@0.3.31 @nodelib/fs.scandir@2.1.5 fastq@1.19.1 event-target-shim@5.0.1 is-stream@2.0.1 lazystream@1.0.1 lodash@4.17.21 base64-js@1.5.1 ieee754@1.2.1 strip-ansi@6.0.1 wrap-ansi@7.0.0 crc-32@1.2.2 crc32-stream@6.0.0 cross-spawn@7.0.6 get-stream@8.0.1 human-signals@5.0.0 is-stream@3.0.0 merge-stream@2.0.0 npm-run-path@5.3.0 onetime@6.0.0 signal-exit@4.1.0 strip-Jnal-newline@3.0.0 depd@2.0.0 setprototypeof@1.2.0 statuses@2.0.1 toidentiJer@1.0.1 inherits@2.0.4 agent-base@7.1.4 hasown@2.0.2 is-extglob@2.1.1 is-inside-container@1.0.0 system-architecture@0.1.0 @isaacs/cliui@8.0.2 braces@3.0.3 mime-db@1.54.0 brace-expansion@2.0.2 whatwg-url@5.0.0 abbrev@3.0.1 tinyexec@1.0.2 ee-Jrst@1.1.1 safe-buffer@5.2.1 buffer-from@1.1.2 source-map@0.6.1 events-universal@1.0.1 text-decoder@1.2.3 emoji-regex@8.0.0 is-fullwidth-code-point@3.0.0 @isaacs/fs-minipass@4.0.1 chownr@3.0.0 minizlib@3.1.0 yallist@5.0.0 @jridgewell/resolve-uri@3.1.2 run-parallel@1.2.0 balanced-match@1.0.2 Jll-range@7.1.1 path-key@3.1.1 shebang-command@2.0.0 which@2.0.2 bare-events@2.8.2 reusify@1.1.0 function-bind@1.1.2 is-docker@3.0.0 readable-stream@2.3.8 path-key@4.0.0 mimic-fn@4.0.0 ansi-regex@5.0.1 tr46@0.0.3 webidl-conversions@3.0.1 ansi-styles@4.3.0 color-convert@2.0.1 to-regex-range@5.0.1 core-util-is@1.0.3 isarray@1.0.0 process-nextick-args@2.0.1 safe-buffer@5.1.2 string_decoder@1.1.1 util-deprecate@1.0.2 queue-microtask@1.2.3 shebang-regex@3.0.0 isexe@2.0.0 color-name@1.1.4 is-number@7.0.0 nitro-nightly@3.0.1-20251110-005841-4cf1b533 consola@3.4.2 crossws@0.4.1 db0@0.3.4 h3@2.0.1-rc.5 jiti@2.6.1 nf3@0.1.9 ofetch@2.0.0-alpha.3 ohash@2.0.11 oxc-minify@0.96.0 oxc-transform@0.96.0 srvx@0.9.5 undici@7.16.0 unenv@2.0.0-rc.24 unstorage@2.0.0-alpha.4 rou3@0.7.10 pathe@2.0.3 Unpacked Size: 76MB Dependencies : 312 Unpacked Size: 15MB Dependencies : 16
23. • Ϗϧυग़ྗαΠζ΋վળ ͞ΒʹϋΠύϑΥʔϚϯεԽ Nitropack v2 Nitro v3 ࡟ݮ% ඪ४Ϗϧυ 135 KB 35.7 KB -74% 34.5 KB (gzip) 10.8 KB (gzip) -69% ඪ४Ϗϧυ (minify) 74.1 KB 21.4 KB -71% 24.5 KB (gzip) 8.11 KB (gzip) -67% https://www.youtube.com/watch?v=189wogO3aCE&t=438s
24. • ϧʔςΟϯάΛίϯύΠϧ͢Δ͜ͱͰϧʔτϚονϯάΛߴ଎Խ ͞ΒʹϋΠύϑΥʔϚϯεԽ ϧʔςΟϯάύε৘ใ͔Β Rou3 ͷίϯύΠϥͰ ϧʔτϚονϯάϩδοΫ ίʔυΛੜ੒
25. Ϩϯμϥͷఏڙ • HTMLΛϨϯμϦϯά͢ΔͨΊʹಛผͳϋϯυϥΛఏڙ͢Δ • ಛఆͷAPI Routes ΍ Route ϋϯυϥʹҰக͠ͳ͍͢΂ͯͷ Route ʹରͯ͠ HTML ςϯϓϨʔτ͕ϨϯμϦϯά͞ΕΔ $REQUESTͷΑ͏ͳάϧʔόϧม਺΍ Rendu (·ͩexperimental)ͱ͍͏ PHPϥΠΫͳߏจͰ ςϯϓϨʔτΛϨϯμϦϯάͰ͖Δ
26. • Nitro ͷػೳΛ Vite ϓϥάΠϯʹΑͬͯɺVite ΞϓϦέʔγϣϯΛαʔ όʔαΠυ΋ରԠͨ͠ϑϧελοΫԽͯ͠ΞϓϦέʔγϣϯͱͯ͠ఏڙՄ ೳʹ Vite ϓϥάΠϯͷఏڙ
27. Demo Nitro Vite ϓϥάΠϯ + Elysia + Vue Λ࢖ͬͨ SSRͰ͖ΔΧ΢ϯλʔ ViteΞϓϦέʔγϣϯ
28. • NitroͷͲ͜ʹͰ΋σϓϩΠͰ͖ΔಛੑΛ׆͔ͯ͠ɺVite ΞϓϦέʔγϣϯ Λ༷ʑͳϗεςΟϯάϓϥοτϑΥʔϜʹσϓϩΠͰ͖Δʂ • Vite Λϕʔεʹඞཁ࠷খݶͷSSRΛ݉Ͷඋ͑ͨ΋ͷΛߏஙՄೳʹ • Vite+ ΋αϙʔτ͢ΔͬΆ͍ʁͷͰγʔϜϨεʹҠߦͰ͖ͦ͏ Vite ϓϥάΠϯ Nitro ͷՄೳੑ https://viteplus.dev/
29. Thank You! ❤