{"id":18660,"date":"2025-10-25T00:50:55","date_gmt":"2025-10-25T00:50:55","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=18660"},"modified":"2025-10-25T00:50:55","modified_gmt":"2025-10-25T00:50:55","slug":"react-vs-vue-english-visasq-dev-blog","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/18660\/","title":{"rendered":"React Vs Vue [English] &#8211; VISASQ Dev Blog"},"content":{"rendered":"\n<\/p>\n<div>\n<p><span itemscope=\"\" itemtype=\"http:\/\/schema.org\/Photograph\"><img decoding=\"async\" src=\"https:\/\/cdn-ak.f.st-hatena.com\/images\/fotolife\/k\/kazutoichikawa\/20251024\/20251024154022.png\" width=\"1200\" height=\"630\" loading=\"lazy\" title=\"\" class=\"hatena-fotolife\" itemprop=\"image\"\/><\/span><\/p>\n<h2 id=\"Introduction\">Introduction<\/h2>\n<p>After spending years developing with React and Nextjs, I recently joined VISASQ where almost all of the frontend development happens in Vue. I was in a team where we migrated from Vue 2 to Vue 3 and currently in a team where we are using Vue3 with Nuxt 3 (recently upgraded to Nuxt 4). This transition gave me a unique opportunity to look at both frameworks from real-world projects. Coming from React&#8217;s flexible ecosystem into Vue&#8217;s more structured environment was both refreshing and revealing. Also, this transition made me dive into deeper understanding of how the web works in both of these tools and what are the core differences between them. This isn&#8217;t a &#8220;which is better&#8221; post, but a technical differences experienced during the transition.<\/p>\n<h2 id=\"The-fundamental-differences-How-they-render-updates\">The fundamental differences: How they render updates<\/h2>\n<ul>\n<li>React: Pull-based rendering<\/li>\n<li>Vue: Push-based reactivity<\/li>\n<\/ul>\n<p>Both of them use a virtual DOM, but they differ in how they update the DOM. React uses its Fiber architecture to reconcile the changes and re-renders the subtrees. The optimization is done with useMemo, useCallback and React.memo to prevent unnecessary re-renders.<br \/>\nVue compiles templates into efficient render functions and updates only the parts that depend on reactive data instead of comparing the entire component tree. This means fewer re-renders and better performance in complex views. In practice, our Vue 3 pages with heavy data grids and forms felt smoother than the equivalent React ones.<\/p>\n<pre class=\"code js\" data-lang=\"js\" data-unlink=\"\">\/\/ React:\nconst [items, setItems] = useState([1,2,3]);\nsetItems([...items, 4]); \/\/ Must create an array\n\n\/\/ Vue3 direct mutation:\nconst items = ref([1,2,3]);\nitems.value.push(4);\n<\/pre>\n<p>In React, a parent state change often causes child re-renders unless carefully memoized whereas in Vue, it is handled naturally without any optimization.<br \/>\nOur vue2 to vue3 migration revealed the depth of this reactivity improvement. Vue2 used Object.defineProperty, which couldn&#8217;t detect property additions or deletions<\/p>\n<h2 id=\"Composition-API-vs-hooks\">Composition <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/API\">API<\/a> vs hooks<\/h2>\n<p>Here is a quick summary of how Vue 3&#8217;s Composition <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/API\">API<\/a> compares to React Hooks, based on the topics covered in this blog:<\/p>\n<div class=\"s_table\"><table>\n<thead>\n<tr>\n<th> Concept <\/th>\n<th> React <\/th>\n<th> Vue 3 <\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td> Function body re-executes <\/td>\n<td> Yes <\/td>\n<td> No <\/td>\n<\/tr>\n<tr>\n<td> <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/Dependency\">Dependency<\/a> tracking <\/td>\n<td> Manual (dependencies array) <\/td>\n<td> Automatic <\/td>\n<\/tr>\n<tr>\n<td> Sharing logic <\/td>\n<td> Custom hooks <\/td>\n<td> Composables <\/td>\n<\/tr>\n<tr>\n<td> Context <\/td>\n<td> Context <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/API\">API<\/a> <\/td>\n<td> Provide \/ Inject <\/td>\n<\/tr>\n<tr>\n<td> Lifecycle <\/td>\n<td> <code>useEffect<\/code>, <code>useLayoutEffect<\/code>, etc. <\/td>\n<td> <code>onMounted<\/code>, <code>onUnmounted<\/code>, etc. <\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<h2 id=\"Component-Philosophy-Template-vs-JSX\">Component Philosophy: Template vs JSX<\/h2>\n<p>React uses JSX everywhere and keeps everything in <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/JavaScript\">JavaScript<\/a>, giving the full flexibility of the language for logic and complex conditional rendering<\/p>\n<pre class=\"code js\" data-lang=\"js\" data-unlink=\"\">\/\/ React:\nreturn(\n    <p>\n        {status === \"loading\" ? <spinner\/>:\n        status === \"error\" ? <error message=\"{error.message}\/\">:\n        items.length === 0 ? <empty\/>:\n        <list items=\"{items}\/\">}\n    <\/list><\/error><\/p>\n)\n\n\/\/ Vue - more verbose:\n<template>\n\n<\/template>\n<\/pre>\n<p>The Vue compiler can hoist static content outside the render function, cache event handlers automatically. These optimizations aren&#8217;t possible with JSX because the compiler can&#8217;t make assumptions about arbitrary JS code. I still prefer JSX for complex conditional rendering. Whenever there are nested ternaries or multiple status checks, <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/JavaScript\">JavaScript<\/a>&#8216;s natural flow is cleaner than chaining <code>v-if<\/code>, <code>v-else-if<\/code>.<\/p>\n<h2 id=\"State-Management\">State Management<\/h2>\n<p>In React, the traditional style of state management is Redux, but I am using zustand. The reason for that is simplicity with minimal boilerplate compared to verbose actions of Redux. Zustand has become my default choice because it requires no providers, has excellent Typescript support, works outside React components and provides great devtools integration.<\/p>\n<p>Vue hsa a similar journey. Vuex felt like early Redux verbose mutations and actions. Pinia, Vue3&#8217;s recommended solution is simple.<\/p>\n<p>For the separation of client and server state, I used tanstack-query (formerly react-query) and it changed how I think about data fetching. <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/I%20believe\">I believe<\/a> that <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/API\">API<\/a> data shouldn&#8217;t live in zustand or Redux,. Tanstack query manages server state, and zustand manages UI state like modals, filters, user preferences etc. Tanstack query works with Vue too, providing the same state management benefits, but currently in our projects we haven&#8217;t adopted it.<br \/>\nWhile tanstack query is excellent for handling complex server-state scenarios, our Vue\/Nuxt architecture already provides a clear, typed and maintainable separation between server and client state.<br \/>\n&#8211; Pinia manages application and UI state<br \/>\n&#8211; Nuxt handles data fetching and <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/SSR\">SSR<\/a> reactivity<br \/>\n&#8211; Vueuse enhances UI behavior<br \/>\nFor our current scale and architecture, this combination offers the right balance of simplicity, flexibility and control without the need for an additional data-fetching library<\/p>\n<h2 id=\"Styling-Approaches\">Styling Approaches<\/h2>\n<p>Both frameworks support multiple styling approaches, but they have different defaults and strengths. React developers typically choose between <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/CSS\">CSS<\/a> modules for standard <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/CSS\">CSS<\/a>, <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/CSS\">CSS<\/a>-in-JS libraries for dynamic styling with runtime cost, tailwind for utility-first classes, or vanilla for zero-runtime <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/CSS\">CSS<\/a>-in-JS with Typescript support.<br \/>\nVue&#8217;s Single File Components have scoped styles built-in. You write regular <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/CSS\">CSS<\/a> in a <code\/> block and it automatically scopes to that component. For dynamic values, Vue 3 introduced <code>v-bind()<\/code> in styles, letting you bind <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/CSS\">CSS<\/a> custom properties to reactive <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/JavaScript\">JavaScript<\/a> values without any runtime <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/CSS\">CSS<\/a>-in-JS cost. This is more performant than Styled Components because it compiles to <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/CSS\">CSS<\/a> variables rather than generating styles at runtime.<\/p>\n<h2 id=\"Side-effects-and-lifestyle\">Side effects and lifestyle<\/h2>\n<p>React overloads <code>useEffect<\/code> for everything: data fetching, event listeners, document title updates and subscriptions.<\/p>\n<pre class=\"code js\" data-lang=\"js\" data-unlink=\"\">function UserProfile({userId}) {\n    const [user, setUser] = useState(null);\n\n    \/\/ Data fetching\n    useEffect(() =&gt; {\n        const handler = () =&gt; console.log('resize');\n        window.addEventListener('resize', handler);\n        return () =&gt; window.removeEventListener('resize', handler);\n    },[])\n\n    \/\/ Document title\n    useEffect(() =&gt; {\n        document.title = user?.name || 'Loading...';\n    }, [user]);\n\n    return <p>{user?.name}<\/p>\n}<\/pre>\n<p>This creates challenges with <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/dependency\">dependency<\/a> arrays, cleanup functions, and understanding when effects run. The <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/dependency\">dependency<\/a> array is a constant source of bugs, missing dependencies cause stale closures, while object or function dependencies causes infinite loops.<br \/>\nThis is one of the reasons why, whenever I setup a Next.js project from scratch, tanstack query is my default go-to to replace <code>useEffect<\/code>.<\/p>\n<p>Vue 3&#8217;s Composition <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/API\">API<\/a> has specific lifecycle hooks that make intent clearer:<\/p>\n<pre class=\"code js\" data-lang=\"js\" data-unlink=\"\"><script setup=\"\"><![CDATA[\nimport {ref, onMounted, onUnMounted, watch, watchEffect} from &#39;vue&#39;;\n\nconst user = ref(null);\nconst props = defineProps([&#39;userId&#39;]);\n\n\/\/ Setup with cleanup\nonMounted(() => {\n    const handler = () => console.log(&#39;resize&#39;);\n    window.addEventListener(&#39;resize&#39;, handler);\n\n    onUnmounted(() => {\n        window.removeEventListener(&#39;resize&#39;, handler);\n    })\n});\n\n\/\/ Watch specific dependencies\nwatch(() => props.userId, async(newId) => {\n    user.value = await fetchUser(newId);\n}, { immediate: true });\n\n\/\/ Auto track all dependencies\nwatchEffect(() => {\n    document.title = user.value?.name || &#39;Loading...&#39;;\n});\n]]><\/script><\/pre>\n<p>The key advantage is there is no <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/dependency\">dependency<\/a> arrays. Vue&#8217;s reactivity automatically tracks what you use. This removes the bugs caused by outdated closures and missing dependencies that trouble React developers.<br \/>\nThe timing is also different. Vue&#8217;s <code>watchEffect<\/code> runs synchronously on mount by default, while React&#8217;s <code>useEffect<\/code> runs after paint.<\/p>\n<p>Next.js has evolved significantly with the App Router introducing Server Components. The default is now server-side rendering with zero <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/JavaScript\">JavaScript<\/a> for non-interactive parts. You mark interactive components with <code>'use client'<\/code>, and Next.js automatically code-splits and hydrates only what&#8217;s necessary.<\/p>\n<p>Nuxt 3 takes a different approach with universal rendering by default. The same code runs on both server and client, and <code>useFetch<\/code> automatically handles the server-to-client state transfer. Nuxt&#8217;s route rules let you set different rendering strategies per route. Both frameworks <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/excel\">excel<\/a> at <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/SEO\">SEO<\/a> with built-in meta tag management.<\/p>\n<h2 id=\"Build-Systems-and-Performance\">Build Systems and Performance<\/h2>\n<p>The build tool landscape has consolidated around Vite for both frameworks. React used to rely on Create React App with webpack, but that&#8217;s now deprecated. Vite provides instant server start, fast hot module replacement, and quick production builds. Next.js has its own build system that historically used Webpack but is transitioning to Turbopack for faster builds. Vue officially adopted Vite, giving developers a consistent and efficient experience.<br \/>\nIn terms of bundle size, Vue is much smaller than React, which can make a noticeable difference for content-heavy sites. However, for larger apps, the framework size is usually small compared to the rest of the code.<br \/>\nBoth ecosystems support tree-shaking and code-splitting, ensuring users only download what is needed for the current page. Next.js and Nuxt handles this automatically, so performance optimization comes built-in.<\/p>\n<h2 id=\"Next-js-15-vs-Nuxt-3\">Next js 15 vs Nuxt 3<\/h2>\n<p>Next.js is a flexible React framework for building SPAs, static sites, or server-rendered apps. Its App Router organizes pages, layouts, and loading states together, while Server Components reduce client-side <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/JavaScript\">JavaScript<\/a>.<br \/>\nNuxt is  Vue&#8217;s full-stack framework built on convention over configuration. It offers universal rendering, auto-imports, and a clear folder structure that keeps code organized with minimal setup.<br \/>\nBoth support middleware for auth and redirects. Next.js separates data fetching between Server and Client Components, while Nuxt&#8217;s <code>useFetch<\/code> works seamlessly on both.<br \/>\n`For deployment, Nuxt&#8217;s Nitro engine supports multiple platforms out of the box, while Next.js is optimized for Vercel but adaptable elsewhere<\/p>\n<h2 id=\"Testing-with-Vitest\">Testing with Vitest<\/h2>\n<p>Vitest has become the standard test runner for both React and Vue projects using Vite. It&#8217;s Jest-compatible but dramatically faster because it uses Vite&#8217;s transformation pipeline.<br \/>\nFor React, you combine Vitest with Testing Library. Vue testing uses Vue Test Utils.<br \/>\nThe performance difference is substantial. A test suite with 500 tests might take 15-20 seconds in Jest but only 3-5 seconds in Vitest. The <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/watch\">watch<\/a> mode is nearly instantaneous, re-running only affected tests in under a second.<\/p>\n<h2 id=\"Practical-Pros-and-Cons\">Practical Pros and Cons<\/h2>\n<div class=\"s_table\"><table>\n<thead>\n<tr>\n<th> Framework <\/th>\n<th> Pros <\/th>\n<th> Cons <\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td> React <\/td>\n<td> &#8211; Largest ecosystem and community <br \/>&#8211; JSX allows complex logic <br \/>&#8211; React Native for mobile code sharing <br \/>&#8211; Predictable data flow due to explicit re-renders<\/td>\n<td> &#8211; Larger bundle size <br \/>&#8211; Requires manual optimization to avoid unnecessary re-renders <br \/>&#8211; Complex hoods and <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/dependency\">dependency<\/a> arrays <br \/>&#8211; Fragmented tooling choices <\/td>\n<\/tr>\n<tr>\n<td> Vue <\/td>\n<td> &#8211; Smaller bundle size <br \/>&#8211; Better performance via fine-grained reactivity <br \/>&#8211; Less boilerplate <br \/>&#8211; Gentler learning curve <br \/>&#8211; <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/Official\">Official<\/a> Integrated solutions (routing, state management) <br \/>&#8211; Compiler handles <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/most\">most<\/a> optimizations <br \/>&#8211; Great developer experience (auto-imports, scoped styles) <\/td>\n<td> &#8211; Smaller ecosystem and fewer third-party libraries <br \/>&#8211; Smaller hiring pool <br \/>&#8211; Template limitations for complex logic <br \/>&#8211; Less adoption in enterprise environments <\/td>\n<\/tr>\n<tr>\n<td> Next.js <\/td>\n<td> &#8211; <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/Cutting%20edge\">Cutting edge<\/a> <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/SSR\">SSR<\/a> features (Server Components, streaming) <br \/>&#8211; Excellent image optimizations <br \/>&#8211; Best deployment experience on Vercel <br \/>&#8211; Advanced rendering strategies (<a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/SSR\">SSR<\/a>) <\/td>\n<td> &#8211; Complexity of Server vs Client Components <br \/>&#8211; Breaking changes between major versions <br \/>&#8211; App Router has a steep learning curve <\/td>\n<\/tr>\n<tr>\n<td> Nuxt <\/td>\n<td> &#8211; Convention over configuration, less boilerplate <br \/>&#8211; Auto-imports everywhere <br \/>&#8211; Flexible deployment via Nitro presets <br \/>&#8211; Smaller bundle size <br \/>&#8211; Unified rendering code <br \/>&#8211; Intuitive file-based routing <\/td>\n<td> &#8211; Smaller ecosystem than Next.js <br \/>&#8211; Opinions can feel constraining <br \/>&#8211; &#8220;Magic&#8221; features may confuse debugging <br \/>&#8211; Less corporate adoption (through growing) <\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<h2 id=\"Conclusion\">Conclusion<\/h2>\n<p>After few years with React and recent intensive work with Vue, I&#8217;ve learned that both frameworks are exceptional tools that <a target=\"_blank\" class=\"keyword\" href=\"https:\/\/d.hatena.ne.jp\/keyword\/excel\">excel<\/a> in different ways. The fundamental differences in reactivity versus re-rendering isn&#8217;t just technical, it changes how you think about updates. My perspective has evolved from &#8220;React is the only way&#8221; to appreciating what both frameworks bring.<\/p>\n<p>What matters isn&#8217;t React vs Vue. What matters is building great experiences for users, and both frameworks enable that when used thoughtfully.<\/p>\n<p>\u30d3\u30b6\u30b9\u30af\u3067\u306f\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u4ef2\u9593\u3092\u52df\u96c6\u3057\u3066\u3044\u307e\u3059\uff01<br \/>\n\u5c11\u3057\u3067\u3082\u30d3\u30b6\u30b9\u30af\u958b\u767a\u7d44\u7e54\u306b\u3054\u8208\u5473\u3092\u6301\u305f\u308c\u305f\u65b9\u306f\u3001\u305c\u3072\u4e00\u5ea6\u30ab\u30b8\u30e5\u30a2\u30eb\u306b\u304a\u8a71\u3057\u3057\u307e\u3057\u3087\u3046\uff01<br \/>\n<iframe src=\"https:\/\/hatenablog-parts.com\/embed?url=https%3A%2F%2Frecruit.visasq.co.jp%2Fdev-designer\" title=\"\u4e2d\u9014\u63a1\u7528\uff08\u958b\u767a\u8077\u30fb\u30c7\u30b6\u30a4\u30ca\u30fc\u8077\uff09 | \u682a\u5f0f\u4f1a\u793e\u30d3\u30b6\u30b9\u30af\" class=\"embed-card embed-webcard\" scrolling=\"no\" frameborder=\"0\" style=\"display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;\" loading=\"lazy\"><\/iframe><cite class=\"hatena-citation\"><a target=\"_blank\" href=\"https:\/\/recruit.visasq.co.jp\/dev-designer\">recruit.visasq.co.jp<\/a><\/cite><\/p>\n<\/div>\n<p><script>(function(d, s, id) {\n  var js, fjs = d.getElementsByTagName(s)[0];\n  if (d.getElementById(id)) return;\n  js = d.createElement(s); js.id = id;\n  js.src = \"\/\/connect.facebook.net\/ja_JP\/sdk.js#xfbml=1&appId=719729204785177&version=v17.0\";\n  fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));<\/script><br \/>\n<br \/>\n<br \/><a href=\"https:\/\/tech.visasq.com\/2025\/10\/24\/144121\">\u5143\u306e\u8a18\u4e8b\u3092\u78ba\u8a8d\u3059\u308b <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Introduction After spending years developing with React and Nextjs, I recently joined VISASQ where almost all  [&hellip;]","protected":false},"author":1,"featured_media":18661,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-18660","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-company-tec"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React Vs Vue [English] - VISASQ Dev Blog - \u30dd\u30b1\u30b3\u30f3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tech.visasq.com\/2025\/10\/24\/144121\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Vs Vue [English] - VISASQ Dev Blog - \u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"og:description\" content=\"Introduction After spending years developing with React and Nextjs, I recently joined VISASQ where almost all [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tech.visasq.com\/2025\/10\/24\/144121\" \/>\n<meta property=\"og:site_name\" content=\"\u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-25T00:50:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1300\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"info@pokecon.jp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"info@pokecon.jp\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"8\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/tech.visasq.com\\\/2025\\\/10\\\/24\\\/144121#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/18660\\\/\"},\"author\":{\"name\":\"info@pokecon.jp\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"headline\":\"React Vs Vue [English] &#8211; VISASQ Dev Blog\",\"datePublished\":\"2025-10-25T00:50:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/18660\\\/\"},\"wordCount\":1603,\"image\":{\"@id\":\"https:\\\/\\\/tech.visasq.com\\\/2025\\\/10\\\/24\\\/144121#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png\",\"articleSection\":[\"\u4f01\u696d\u30c6\u30c3\u30af\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/18660\\\/\",\"url\":\"https:\\\/\\\/tech.visasq.com\\\/2025\\\/10\\\/24\\\/144121\",\"name\":\"React Vs Vue [English] - VISASQ Dev Blog - \u30dd\u30b1\u30b3\u30f3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/tech.visasq.com\\\/2025\\\/10\\\/24\\\/144121#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/tech.visasq.com\\\/2025\\\/10\\\/24\\\/144121#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png\",\"datePublished\":\"2025-10-25T00:50:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/tech.visasq.com\\\/2025\\\/10\\\/24\\\/144121#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/tech.visasq.com\\\/2025\\\/10\\\/24\\\/144121\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/tech.visasq.com\\\/2025\\\/10\\\/24\\\/144121#primaryimage\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png\",\"contentUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png\",\"width\":1300,\"height\":683},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/tech.visasq.com\\\/2025\\\/10\\\/24\\\/144121#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Vs Vue [English] &#8211; VISASQ Dev Blog\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\",\"name\":\"\u30dd\u30b1\u30b3\u30f3\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\",\"name\":\"info@pokecon.jp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"caption\":\"info@pokecon.jp\"},\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/author\\\/infopokecon-jp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Vs Vue [English] - VISASQ Dev Blog - \u30dd\u30b1\u30b3\u30f3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121","og_locale":"ja_JP","og_type":"article","og_title":"React Vs Vue [English] - VISASQ Dev Blog - \u30dd\u30b1\u30b3\u30f3","og_description":"Introduction After spending years developing with React and Nextjs, I recently joined VISASQ where almost all [&hellip;]","og_url":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121","og_site_name":"\u30dd\u30b1\u30b3\u30f3","article_published_time":"2025-10-25T00:50:55+00:00","og_image":[{"width":1300,"height":683,"url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png","type":"image\/png"}],"author":"info@pokecon.jp","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"info@pokecon.jp","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"8\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121#article","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/18660\/"},"author":{"name":"info@pokecon.jp","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"headline":"React Vs Vue [English] &#8211; VISASQ Dev Blog","datePublished":"2025-10-25T00:50:55+00:00","mainEntityOfPage":{"@id":"https:\/\/pokecon.jp\/job\/18660\/"},"wordCount":1603,"image":{"@id":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png","articleSection":["\u4f01\u696d\u30c6\u30c3\u30af"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/pokecon.jp\/job\/18660\/","url":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121","name":"React Vs Vue [English] - VISASQ Dev Blog - \u30dd\u30b1\u30b3\u30f3","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121#primaryimage"},"image":{"@id":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png","datePublished":"2025-10-25T00:50:55+00:00","author":{"@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"breadcrumb":{"@id":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tech.visasq.com\/2025\/10\/24\/144121"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121#primaryimage","url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png","contentUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkazutoichikawa2F202510242F202510241.png","width":1300,"height":683},{"@type":"BreadcrumbList","@id":"https:\/\/tech.visasq.com\/2025\/10\/24\/144121#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/pokecon.jp\/job\/"},{"@type":"ListItem","position":2,"name":"React Vs Vue [English] &#8211; VISASQ Dev Blog"}]},{"@type":"WebSite","@id":"https:\/\/pokecon.jp\/job\/#website","url":"https:\/\/pokecon.jp\/job\/","name":"\u30dd\u30b1\u30b3\u30f3","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pokecon.jp\/job\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997","name":"info@pokecon.jp","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","caption":"info@pokecon.jp"},"url":"https:\/\/pokecon.jp\/job\/author\/infopokecon-jp\/"}]}},"_links":{"self":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/18660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/comments?post=18660"}],"version-history":[{"count":1,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/18660\/revisions"}],"predecessor-version":[{"id":18662,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/18660\/revisions\/18662"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media\/18661"}],"wp:attachment":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media?parent=18660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/categories?post=18660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/tags?post=18660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}