{"componentChunkName":"component---gatsby-theme-mdx-deck-src-templates-deck-js","path":"/","matchPath":"/*","result":{"data":{"deck":{"id":"93da2e06-aa4e-5dab-afd6-9d79e7410e84","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar themes = [myTheme, prism];\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  themes: themes,\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Gatsby vs. Next.js\"), mdx(\"p\", null, \"GatsbyJS meetup\", mdx(\"br\", null), \"\\nPrague, 14 Nov 2019\"), mdx(\"hr\", null), mdx(\"h2\", null, \"I am a \", mdx(\"em\", {\n    parentName: \"h2\"\n  }, \"software engineer\")), mdx(\"hr\", null), mdx(\"h2\", null, \"... forced to make websites\"), mdx(\"hr\", null), mdx(\"p\", null, \"2000's & most of 2010's:\"), mdx(\"p\", null, \"blogs \\u2192 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"WordPress\"), mdx(\"br\", null), \"\\nsimple sites \\u2192 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"plain HTML\")), mdx(\"hr\", null), mdx(\"h1\", null, \"It was both \\u270C\\uFE0F and \\uD83E\\uDD15\"), mdx(\"hr\", null), mdx(\"h1\", null, \"WordPress\"), mdx(\"p\", null, \"\\u2705 Complex sites quickly\", mdx(\"br\", null), \"\\n\\u2705 Themes & plugins\", mdx(\"br\", null), \"\\n\\u2705 Lots of resources\", mdx(\"br\", null)), mdx(\"hr\", null), mdx(\"h1\", null, \"WordPress\"), mdx(\"p\", null, \"\\uD83D\\uDE41 Ugly old codebase\", mdx(\"br\", null), \"\\n\\uD83D\\uDC0C Slow by default\", mdx(\"br\", null), \"\\n\\uD83D\\uDE2D No version control\", mdx(\"br\", null)), mdx(\"hr\", null), mdx(\"h1\", null, \"Plain old HTML\"), mdx(\"p\", null, \"Confession: I actually enjoyed it\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Plain old HTML\"), mdx(\"p\", null, \"... but was really unproductive with it\"), mdx(\"hr\", null), mdx(\"p\", null, \"In the meantime, \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"React\"), \" \\u269B\\uFE0F happened\"), mdx(\"hr\", null), mdx(\"p\", null, \"I quickly fell in love\"), mdx(\"hr\", null), mdx(\"p\", null, \"We adopted it for VersionPress' UI in 2015\"), mdx(\"hr\", null), mdx(\"p\", null, \"... and built a VP.com dashboard with it\"), mdx(\"hr\", null), mdx(\"h3\", null, \"We were building \", mdx(\"em\", {\n    parentName: \"h3\"\n  }, \"apps\"), \" in React\"), mdx(\"hr\", null), mdx(\"p\", null, \"But \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"websites\"), \" were still \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"WordPress\"), \" & \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"plain HTML\")), mdx(\"hr\", null), mdx(\"h1\", null, \"2018: Gatsby explodes \\uD83D\\uDCA5\"), mdx(\"h2\", null, mdx(MiddleImg, {\n    mdxType: \"MiddleImg\"\n  }, mdx(GatsbyLogo, {\n    mdxType: \"GatsbyLogo\"\n  }))), mdx(\"hr\", null), mdx(\"p\", null, \"I'm trying it for our \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://versionpress.com\"\n  }), \"VP.com website\")), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u2764\\uFE0F\\u2764\\uFE0F\\u2764\\uFE0F SPEEED \\u2764\\uFE0F\\u2764\\uFE0F\\u2764\\uFE0F\"), mdx(\"hr\", null), mdx(\"h3\", null, \"no servers to \", mdx(\"del\", {\n    parentName: \"h3\"\n  }, \"manage\"), \" hack\"), mdx(\"hr\", null), mdx(\"h3\", null, \"React \\u269B\\uFE0F\"), mdx(\"hr\", null), mdx(\"p\", null, \"New kind of experience \\u21D2 questioning old truths\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\uD83E\\uDD14 Why do we build SPAs?\"), mdx(\"hr\", null), mdx(\"div\", {\n    style: {\n      fontSize: '0.5em'\n    }\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n  <body>\\n    <div id=\\\"root\\\"></div>\\n    <script type=\\\"text/javascript\\\" src=\\\"/static/vendors.js\\\"></script>\\n    <script type=\\\"text/javascript\\\" src=\\\"/static/app.js\\\"></script>\\n  </body>\\n</html>\\n\"))), mdx(\"h3\", null, \"Why are we serving this to our users?\"), mdx(\"hr\", null), mdx(\"p\", null, \"But we kept at it.\"), mdx(\"hr\", null), mdx(\"h1\", null, \"2019: New project\"), mdx(\"hr\", null), mdx(\"h1\", null, mdx(MiddleImg, {\n    mdxType: \"MiddleImg\"\n  }, mdx(ShoptetLogo, {\n    mdxType: \"ShoptetLogo\"\n  }))), mdx(\"hr\", null), mdx(\"h2\", null, \"Would Gatsby be a good fit?\"), mdx(\"hr\", null), mdx(\"img\", {\n    width: \"600\",\n    alt: \"Kyle's tweet about SSR\",\n    src: \"https://user-images.githubusercontent.com/101152/68533165-1d643080-0325-11ea-86a8-2036e7779c3c.png\"\n  }), mdx(\"hr\", null), mdx(\"img\", {\n    width: \"601\",\n    alt: \"Another tweet on Gatsby's SSR\",\n    src: \"https://user-images.githubusercontent.com/101152/68535956-b6f20900-034a-11ea-82a9-fd7cac06b5e1.png\"\n  }), mdx(\"hr\", null), mdx(\"h3\", null, \"By \\\"SSR\\\", Gatsby means build-time pre-rendering\"), mdx(\"p\", null, \"Dear sirs, SSR !== pre-rendering. Best regards, Borek\"), mdx(\"hr\", null), mdx(\"img\", {\n    \"src\": \"https://assets.zeit.co/image/upload/v1538361091/repositories/next-js/next-js.png\",\n    \"alt\": \"Next.js\"\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"It felt quite poor in comparison:\"), mdx(\"div\", {\n    style: {\n      textAlign: 'left'\n    }\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Barebones (no plugin system, no themes, ...)\", mdx(\"br\", null)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"No universal data layer via GraphQL\", mdx(\"br\", null)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Fewer optimizations out of the box\", mdx(\"br\", null)))), mdx(\"hr\", null), mdx(\"h2\", null, \"But it had \", mdx(\"strong\", {\n    parentName: \"h2\"\n  }, \"SSR\")), mdx(\"p\", null, \"and eshops abso-freakin-lutely need SSR\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Next.js also felt better than other choices\"), mdx(\"img\", {\n    width: \"777\",\n    alt: \"Screenshot 2019-11-14 at 00 04 50\",\n    src: \"https://user-images.githubusercontent.com/101152/68812104-6a703b80-0672-11ea-80de-4ffcc97228da.png\"\n  }), mdx(\"hr\", null), mdx(\"h1\", null, \"So we tried it\"), mdx(\"hr\", null), mdx(\"h1\", null, \"... and it felt really good!\"), mdx(\"p\", null, \"(see the pattern? \\u2764\\uFE0F\\u2764\\uFE0F\\u2764\\uFE0F)\"), mdx(\"hr\", null), mdx(\"p\", null, \"Being \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"barebones\"), \" was a benefit for Shoptet's platform\"), mdx(\"hr\", null), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Data fetching\"), \" however we wanted\"), mdx(\"p\", null, \"(we chose GraphQL anyway \\uD83D\\uDE04)\"), mdx(\"hr\", null), mdx(\"p\", null, \"The \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"best runtime model\"), \" I've seen to date\"), mdx(\"hr\", null), mdx(\"div\", {\n    style: {\n      maxWidth: '450px'\n    }\n  }, mdx(\"img\", {\n    \"src\": \"https://user-images.githubusercontent.com/101152/68861815-8fa19000-06ec-11ea-94a4-33d04492dbb1.jpeg\",\n    \"alt\": \"nextjs-different-apps\"\n  })), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/abigger87/status/1175459223137701888\"\n  }), \"Source\")), mdx(\"hr\", null), mdx(\"p\", null, \"ZEIT Now deployments \\uD83D\\uDE0D\"), mdx(\"p\", null, \"\\u25B2\"), mdx(\"hr\", null), mdx(\"h1\", null, \"So...\"), mdx(\"h2\", null, \"When to use which?\"), mdx(\"hr\", null), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"For \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"static sites\"), \", I'd use Gatsby \", mdx(SmallImg, {\n    mdxType: \"SmallImg\"\n  }, mdx(GatsbyLogo, {\n    mdxType: \"GatsbyLogo\"\n  })))), mdx(\"hr\", null), mdx(\"h1\", null, mdx(SmallImg, {\n    mdxType: \"SmallImg\"\n  }, mdx(GatsbyLogo, {\n    mdxType: \"GatsbyLogo\"\n  }))), mdx(\"div\", {\n    style: {\n      textAlign: 'left'\n    }\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Easily combine data from multiple sources\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Markdown\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"WordPress\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"`\", \"gatsby-source-*\", \"`\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Many plugins available\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Great performance\"))), mdx(\"hr\", null), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"For \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"apps\"), \", I'd use Next \", mdx(SmallImg, {\n    mdxType: \"SmallImg\"\n  }, mdx(NextLogo, {\n    mdxType: \"NextLogo\"\n  })))), mdx(\"hr\", null), mdx(\"h1\", null, mdx(SmallImg, {\n    mdxType: \"SmallImg\"\n  }, mdx(NextLogo, {\n    mdxType: \"NextLogo\"\n  }))), mdx(\"div\", {\n    style: {\n      textAlign: 'left'\n    }\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"See e.g. Kap\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Next.js has almost no downsides \", mdx(\"br\", null), \"compared to plain React app / CRA\"))), mdx(\"hr\", null), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"For \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"complex / dynamic sites\"), \", clearly Next \", mdx(SmallImg, {\n    mdxType: \"SmallImg\"\n  }, mdx(NextLogo, {\n    mdxType: \"NextLogo\"\n  })))), mdx(\"hr\", null), mdx(\"h1\", null, mdx(SmallImg, {\n    mdxType: \"SmallImg\"\n  }, mdx(NextLogo, {\n    mdxType: \"NextLogo\"\n  }))), mdx(\"div\", {\n    style: {\n      textAlign: 'left'\n    }\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Both pre-rendering (ala Gatsby) \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"and\"), \" SSR\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Not too complex, not too simple\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Super-powers when combined with Now \\u25B2\"))), mdx(\"hr\", null), mdx(\"h1\", null, \"But most importantly...\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Both are \\u269B\\uFE0F\"), mdx(\"hr\", null), mdx(\"h1\", null, \"\\u269B\\uFE0F\"), mdx(\"p\", null, \"One set of skills\", mdx(\"br\", null), \"\\nCode is 95% the same\", mdx(\"br\", null), \"\\nBoth built on React, Babel, webpack, ...\"), mdx(\"hr\", null), mdx(\"p\", null, \"(4. For a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"slide deck\"), \", I'd use Gatsby \", mdx(SmallImg, {\n    mdxType: \"SmallImg\"\n  }, mdx(GatsbyLogo, {\n    mdxType: \"GatsbyLogo\"\n  })), \" & mdx-deck \\uD83D\\uDE04. \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/borekb/gatsby-vs-nextjs-talk-201911\"\n  }), \"Repo\"), \".)\"), mdx(\"h1\", null, \"Thank you!\"), mdx(\"p\", null, \"--\"), mdx(\"small\", null, \"@borekb\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"matchPath":"/*","isCreatedByStatefulCreatePages":false,"id":"93da2e06-aa4e-5dab-afd6-9d79e7410e84","slug":"","title":"Gatsby vs. Next.js"}}}