{"id":13725080,"url":"https://github.com/prisma/server-components-demo","last_synced_at":"2025-05-07T19:32:42.824Z","repository":{"id":40000732,"uuid":"325549574","full_name":"prisma/server-components-demo","owner":"prisma","description":"Demo app of React Server Components.","archived":true,"fork":true,"pushed_at":"2023-08-17T07:29:45.000Z","size":83,"stargazers_count":301,"open_issues_count":0,"forks_count":21,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-08-04T01:26:56.477Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://reactjs.org/server-components","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"reactjs/server-components-demo","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prisma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-30T12:49:27.000Z","updated_at":"2024-06-12T15:00:29.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/prisma/server-components-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prisma%2Fserver-components-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prisma%2Fserver-components-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prisma%2Fserver-components-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prisma%2Fserver-components-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prisma","download_url":"https://codeload.github.com/prisma/server-components-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645200,"owners_count":17346093,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:02:12.128Z","updated_at":"2024-11-14T15:30:41.837Z","avatar_url":"https://github.com/prisma.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![](https://imgur.com/wCjXu2u.png)\n\n\u003e **⚠️ Warning**: The `react-prisma` package is deprecated. You can now query your database directly from a React Server Component using Prisma Client.\n\u003e \n\u003e Refer to the [javascript/rest-nextjs](https://github.com/prisma/prisma-examples/tree/latest/javascript/rest-nextjs) and [typescript/rest-nextjs-api-routes](https://github.com/prisma/prisma-examples/tree/latest/typescript/rest-nextjs-api-routes) to learn how you can use Prisma Client in React Server Components.\n\n# React Server Components Demo with Prisma\n\nThis is a fork of the official [React Server Components Demo](https://github.com/reactjs/server-components-demo). You can learn more about how Prisma and React Server Components fit together in this [video](https://youtu.be/ATBdP-Yfaec?t=1482).\n\nInstead of sending raw SQL queries, this repo uses [Prisma](https://prisma.io) as an ORM to communicate with the database. This approach has a number of benefits:\n\n- More intuitive querying (no SQL knowledge required)\n- Better developer experience (e.g. through autocompletion)\n- Safer database queries (e.g. prevents SQL injections)\n- Easier to query relations\n- Human-readable data model + generated (but customizable) SQL migration scripts\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth\u003e Prisma \u003c/th\u003e\n\u003cth\u003e SQL \u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```js\n// A database query sent with Prisma\nconst notes = prisma.note.findMany({\n  where: {\n    title: {\n      contains: searchText,\n    },\n  },\n});\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```js\n// A database query sent with plain SQL\nconst notes = db.query(\n  `select * from notes \n      where title ilike $1 \n      order by id desc`,\n  ['%' + searchText + '%']\n).rows;\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\nThis demo also uses a plain [SQLite](https://www.sqlite.org/index.html) database file instead of requiring a PostgreSQL server. This enables you to explore the awesome benefits of Server Components without any additional setup.\n\n## Usage\n\n```bash\ngit clone git@github.com:prisma/server-components-demo.git\ncd server-components-demo\nnpm install\nnpm start\n```\n\nThis demo features an experimental package, [`react-prisma`](https://www.npmjs.com/package/react-prisma). You can see `react-prisma` in action in [`src/NoteList.server.js`](./src/NoteList.server.js).\n\n## Switch to another database (e.g. PostgreSQL, MySQL, SQL Server)\n\nIf you want to try this example with another database than SQLite, you can adjust the the database connection in [`prisma/schema.prisma`](./prisma/schema.prisma) by reconfiguring the `datasource` block. \n\nLearn more about the different connection configurations in the [docs](https://www.prisma.io/docs/reference/database-reference/connection-urls).\n\n\u003cdetails\u003e\u003csummary\u003eExpand for an overview of example configurations with different databases\u003c/summary\u003e\n\n### PostgreSQL\n\nFor PostgreSQL, the connection URL has the following structure:\n\n```prisma\ndatasource db {\n  provider = \"postgresql\"\n  url      = \"postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA\"\n}\n```\n\nHere is an example connection string with a local PostgreSQL database:\n\n```prisma\ndatasource db {\n  provider = \"postgresql\"\n  url      = \"postgresql://janedoe:mypassword@localhost:5432/notesapi?schema=public\"\n}\n```\n\n### MySQL\n\nFor MySQL, the connection URL has the following structure:\n\n```prisma\ndatasource db {\n  provider = \"mysql\"\n  url      = \"mysql://USER:PASSWORD@HOST:PORT/DATABASE\"\n}\n```\n\nHere is an example connection string with a local MySQL database:\n\n```prisma\ndatasource db {\n  provider = \"mysql\"\n  url      = \"mysql://janedoe:mypassword@localhost:3306/notesapi\"\n}\n```\n\n### Microsoft SQL Server (Preview)\n\nHere is an example connection string with a local Microsoft SQL Server database:\n\n```prisma\ndatasource db {\n  provider = \"sqlserver\"\n  url      = \"sqlserver://localhost:1433;initial catalog=sample;user=sa;password=mypassword;\"\n}\n```\n\nBecause SQL Server is currently in [Preview](https://www.prisma.io/docs/about/releases#preview), you need to specify the `previewFeatures` on your `generator` block:\n\n```prisma\ngenerator client {\n  provider        = \"prisma-client-js\"\n  previewFeatures = [\"microsoftSqlServer\"]\n}\n```\n\n\u003c/details\u003e\n\n## Evolving the app\n\nPrisma enables you to run migrations based on the declarative [Prisma schema](https://www.prisma.io/docs/concepts/components/prisma-schema). Assume you want to add more functionality to the app and add a second table to the database to associate every note with an \"author\", here's the workflow that you can apply with Prisma.\n\nFirst adjust the data model in [`prisma/schema.prisma`](./prisma/schema.prisma):\n\n```diff\n// prisma/schema.prisma\n\nmodel Note {\n   id        Int      @id @default(autoincrement())\n   createdAt DateTime @default(now())\n   updatedAt DateTime @updatedAt\n   title     String?\n   body      String?\n+  author    User?    @relation(fields: [authorId], references: [id])\n+  authorId  Int?\n}\n\n+model User {\n+   id    Int     @id @default(autoincrement())\n+   name  String?\n+   email String  @unique\n+   notes Note[]\n+}\n```\n\nThen run the following command to create the new `User` table and its relation to the `Note` table in the database:\n\n```\nnpx prisma migrate dev --preview-feature\n```\n\nYou can now read and write data into the `User` table using Prisma as well:\n\n```ts\n// Create a new note\nprisma.user.create({\n  name: \"Dan\",\n  email: \"dan@facebook.com\",\n  notes: {\n    create: {\n      title: \"I did not make ReactJS\"\n    }\n  }\n})\n\n// Query all notes with their authors\nprisma.note.findMany({\n  include: {\n    author: true\n  }\n})\n```\n\n## View and edit the data in Prisma Studio\n\n[Prisma Studio](https://github.com/prisma/studio/) is a \"database browser\" that lets you view and edit the data in your database. You can either [download](https://github.com/prisma/studio/releases) it for your operating system or run the following command to run it in your browser:\n\n```\nnpx prisma studio\n```\n\nHere's a screenshot of Prisma Studio that shows the [seeded](./scripts/seed.js) data:\n\n![](https://imgur.com/TMha4N7.png)\n\n## License\n\nThis demo is MIT licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprisma%2Fserver-components-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprisma%2Fserver-components-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprisma%2Fserver-components-demo/lists"}